详解Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

Vue 实例

在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。

Vue 实例化的选项

需要注意的是含 this 的函数大多不要使用箭头函数，因为我们期望 this 指向 Vue 实例。

data

Vue 实例的数据都保存在 data 对象中，Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

var data = { a: 1 }// 直接创建一个实例var vm = new Vue({ data: data})vm.a // -> 1vm.$data === data // -> true

这样数据就绑定在 HTML 中，Vue 框架监视 data 的数据变化，自动更新 HTML 内容。

computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue

实例。

var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取，值只须为函数 aDouble: function () {  return this.a * 2 }, // 读取和设置 aPlus: {  get: function () {  return this.a + 1  },  set: function (v) {  this.a = v - 1  } } }})vm.aPlus // -> 2vm.aPlus = 3vm.a  // -> 2vm.aDouble // -> 4

这里可以省略setter,如果省略了setter，那么值就可以是普通函数，但是必须有返回值。

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

var vm = new Vue({ data: { a: 1 }, methods: { plus: function () {  this.a++ } }})vm.plus()vm.a // 2

看下面这个例子，methods 和 computed 看起来可以做同样的事情，单纯看结果两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比而言，只要发生重新渲染，method 调用总会执行该函数。

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () {  // `this` points to the vm instance  return this.message.split('').reverse().join('') } }})

watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。