Vue 实例的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、创建数据绑定等，

在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。

生命周期：Vue 实例从创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期

生命周期钩子：就是生命周期事件的别名而已。也就是说：生命周期钩子 = 生命周期函数 = 生命周期事件

生命周期函数

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

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

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated和 destroyed。生命周期钩子的 this上下文指向调用它的 Vue 实例。根据提供的生命周期钩子，以下对 Vue 实例各个阶段的情况进行说明：

创建期间的生命周期函数

[ beforeCreate ] 在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。

也就是说，实例刚在内存中被创建出来，此时还没有初始化好 data 和 methods 属性。

[ created ] 在实例创建之后调用。

此时已完成数据观测、事件方法，但尚未开始DOM编译，即未挂载到document中。

也就是说，实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板

[ beforeMount ] 在mounted之前运行。

此时，已经完成了模板编译，但是还没有挂载到页面中。

[ mounted ] 手动挂载，在编译结束时调用。

此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档。

也就是说，此时，已经将编译好的模板，挂载到了页面指定的容器中显示

运行期间的生命周期函数

[ beforeUpdate ] 在实例挂载之后，再次更新实例（例如更新 data）时会调用该方法，此时尚未更新DOM结构。

也就是说，状态更新之前执行此函数，此时，data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

[ updated ] 在实例挂载之后，再次更新实例并更新完DOM结构后调用。

也就是说，实例更新完毕后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。

销毁期间的生命周期函数

[ beforeDestroy ] 在开始销毁实例时调用，此刻实例仍然有效。

也就是说，实例销毁之前调用，在这一步，实例仍然完全可用。

[ destroyed ] 在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。

也就是说，Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁。

[ activated ] 需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法。

[ deactivated ] 需要配合动态组件keep-live属性使用。在动态组件初始化移出的过程中调用该方法。

// 代码示例：通过一个简单实例来了解Vue实例内部的运行机制

<div id="demo">{{msg}}</div>

<script>
var vm = new Vue({
  el: '#demo',
  data:{
    msg:'match'
  },
  beforeCreate(){
    console.log('beforeCreate');
  },
  created(){
    console.log('created');
  },
  beforeMount(){
    console.log('beforeMount');
  },
  mounted(){
    console.log('mounted');
  },
  beforeUpdate(){
    console.log('beforeUpdate');
  },
  updated(){
    console.log('updated');
    //组件更新后调用$destroyed函数，进行销毁
    this.$destroy();    
  },
  beforeDestroy(){
    console.log('beforeDestroy');
  },
  destroyed(){
    console.log('destroyed');
  },
})
</script>

// 不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

[ 生命周期图示 ]