Vue：学习笔记（二）-实例

书接前文。继续学习Vue，距离上一篇笔记又有十几天了，因为最近实在是工作太忙了，但还是应该努力坚持。

正文

创建Vue实例

如何创建一个Vue的实例呢？

var vm = new Vue({
  // options
})

Vue参考了MVVM模型，这里的vm指代ViewModel。

当你创建一个Vue实例的时候，你可以创建一个options对象给它，这个将来会再具体讨论。

数据和方法

当一个Vue实例被创建时，它会把所有位于data对象里面的属性加入到Vue响应式系统里面，这样一旦这些属性发生了变化，视图会响应，并且更新相应的值。

// Our data object 这是一个自定义的对象
 var data = { a: 1 }
 
 // The object is added to a Vue instance 这个对象被加入进了vm实例
 var vm = new Vue({
   data: data // 这里是一个赋值语句，前面一个data是vm的关键属性对象，后面是上面我们定义的变量
 })
 
 // Getting the property on the instance
 // returns the one from the original data 
 //这里做了一个判断，判断vm的a属性和外面的data的a属性是否相等，因为它们其实是一致的，指向一个实际的对象，所以是相等的。不过，这里的写法是vm.a，而不是vm.data.a。
 vm.a == data.a // => true 
 
 // Setting the property on the instance
 // also affects the original data
 // 用赋值来进行判断
 vm.a = 2
 data.a // => 2
 
 // ... and vice-versa
 // 上面这句话叫做反之亦然
 data.a = 3
 vm.a // => 3

这是官网的一个例子，加了一些翻译和注释，方便理解，从中可以看到变量data和vm的关系。

需要注意一个地方，data对象里面的属性只有是在Vue实例创建时就存在的，才会被纳入响应式系统里面去，这也就是说，后来加进去的属性，是不会具有上面这种响应式的能力的。所以，一旦你希望有一个属性能够具有这种能力，但是在一开始你又不确定它的值的话，做法就很明显了，你需要先定义这个属性，并且赋一个初始值，例如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

例外的，还有一个用法，Object.freeze()，这个用法是用来不让属性被修改。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- this will no longer update `foo`! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

Vue自身还有一些实例属性和方法，为了和用户定义的区分开，以“$”为前缀。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
  // This callback will be called when `vm.a` changes
})

实例生命周期的钩子

Each Vue instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

这里的意思实际是：实例的生命周期被定义为了几个阶段，每个阶段会有一个回调函数来暴露给用户，让用户来进行一些工作，这个很像安卓的设计。

例如：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` points to the vm instance
    console.log('a is: ' + this.a)
  }
})

这个就是在Vue创建时暴露给用户。

完整的生命周期参考下图：