图解 Vue.js 的生命周期

每个 Vue.js 实例在被创建时都要经过一系列的初始化过程。比如，需要设置数据监听、编译模板、创建必要的数据绑定等。同时在这个过程中也会运行一些叫做生命周期钩子函数，这给了用户在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建之后执行代码：

基本语法

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

可见，就是 Vue.js 的生命周期钩子函数可以自动触发的函数。

生命周期

在实例生命周期的不同阶段调用不同的钩子，如 compiled、ready 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。下图展示了 Vue.js 实例的整个生命周期。

• init：组件刚刚被创建，但 Data、method 等属性还没被计算出来调用
• created：组件创建已经完成，但 DOM 还没被生成出来调用
• beforeCompile：模板编译之前调用
• compiled：模板编译之后调用
• ready：组件准备好之后调用
• attached：在 vm.$el 插入到 DOM 时调用
• detached：在 vm.$el 从 DOM 中删除时调用
• beforeDestory：组件销毁之前调用
• destoryed：组件销毁之后调用

所有的 Vue 组件同时也都是 Vue.js 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项，el 和 data 选项在使用时需要返回函数) 并提供相同的生命周期钩子。不同的是，Vue.js 还给组件提供了 activate 钩子函数，作用于动态组件切换或者静态组件初始化的过程中。activate 接受一个回调函数做为参数，使用函数后组件才进行之后的渲染过程。

Vue.component('activate-example', {
  activate: function (done) {
    loadDataAsync(data => {
      this.someData = data
      done()
    })
  }
})

请注意，activate 只有在动态组件交换或静态组件的初始渲染期间才会考虑挂钩。它不会影响实例方法的手动插入。

参考资源

• Instance Lifecycle
• Activate Hook