Vue的生命周期钩子函数

在vue中一个完整的生命周期过程，我们可以得知生命周期的三个过程：初始化、运行中、销毁中共有八个钩子函数，如下。
● beforeCreate( ) { }
● created( ) { }
● beforeMount( ) { }
●mounted( ) { }
● beforeUpdate( ) { }
● updated( ) { }
● beforeDestroy( ) { }
● destroyed( ) { }
注意：
生命周期钩子的 this 上下文指向调用它的 Vue 实例。
生命周期钩子函数不允许写成箭头函数，因为箭头函数中没有 this，this会作为变量一直向上级作用域查找，直至找到为止，这与生命周期钩子的 this 的指向不同。

钩子函数的的使用 

1.创建期间的生命周期函数：

● beforeCreate( ) { }
● created( ) { }

在页面创建前调用的生命周期钩子函数是beforeCreate( ) { }，这个函数我们大多数会和路由守卫一起使用，在页面创建前给它一个路由守卫来保护。

在页面创建后我们的created()钩子函数进行的DOM操作，可以和Vue.nextTick()一起进行，一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data,methods属性
created：实例已经在内存中创建好，此时data和methods已经创建好，此时还没有开始编译模板

页面的更新我们使用的是最多的，因为我们的data函数里面的数据渲染页面时，调用更新的次数很多

● beforeMount( ) { }
●mounted( ) { }

beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

2.运行期间的生命周期函数

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

这里需要注意的是beforeUpdate是在data数据被改变后触发，这里的data数据改变如何理解，仅从字面上理解只要data数据值改变就会触发beforeUpdate吗？答案是否定的，我们做个测试。

我们在mounted里修改data的值，mounted表示实例已经挂载完成，因此从理论上来说在在mounted里修改data会触发beforeUpdate，

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

data:{
      arrData:[1，2，3]  
},

updated : function(){
     console.log("1==我会先执行");

     this.$nextTick(function(){
          //在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法，获取更新后的DOM.

          console.log("3==页面渲染完了才会立即执行");

     })

     console.log("2==会比$nextTick先执行")

 }

3.销毁期间的生命周期函数

beforeDestory：实例销毁之前调用，在这一步，实例仍然完全可用
destroyed：Vue实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁，通常当我们离开这个页面的时候，便会调用这个函数