图解Vue.js的生命周期

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

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

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

Lifecycle

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

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

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

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

参考资源:

发表评论

电子邮件地址不会被公开。 必填项已用*标注