Vue | 生命周期与生命周期钩子函数

说到Vue.js的生命周期，总会给出官网的如下视图：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

对照着上图，我们解释一下生命周期函数

• beforeCreate：组件实例刚被创建，组件属性计算之前，如data属性等。
• created：组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在。
• beforeMount：模版编译/挂载之前。
• mounted：模版编译/挂载之后。
• beforeUpdate：组件更新之前。
• updated：组件更新之后。
• activated： for keep-alive ，组件被激活时使用。
• deactivated： for keep-alive， 组件被移除时使用。
• beforeDestroy： 组件销毁前调用。
• destroyed：组件销毁后调用。

create 和 mounted 的关系

• beforeCreated：el 和 data 并未初始化
• created:完成了 data 数据的初始化，el没有
• beforeMount：完成了 el 和 data 初始化
• mounted ：完成挂载