vue 生命周期

什么是生命周期，有什么作用

定义：vue 实例从创建到销毁的过程，在某个特定的位置会触发一个回调函数
作用：供开发者在生命周期的特定阶段执行相关的操作

生命周期分别有几个阶段

有四个阶段，每个阶段有两个钩子，一个前一个后
创建阶段：
beforeCreate ：new Vue( ) 之后执行，但所以数据都还无法访问
created： 能拿到实例数据，这里更改数据不会触发更新，可使用this.$nextTick来执行要访问DOM的操作

挂载阶段：
beforeMount ：template模版导入生成虚拟DOM，更改数据不会出发更新
mounted ： 真实DOM挂载完毕，可以用 $refs访问到真实DOM

更新阶段：
beforeUpdate ：响应式数据发生更新，虚拟 DOM 生成，在这个阶段修改数据不会重新渲染
updated ：真实DOM完成更新，这里修改数据可能会导致无限循环更新。

销毁阶段：
beforeDestroy ：销毁之前，所以实例数据DOM都可以访问，做组件销毁前的收尾工作，如注销事件绑定，清除定时器，销毁占内存数据
destroyed：组件被销毁，DOM被移除

使用keepAlive缓存组件，组件切换会触发actived / deactived两个钩子：
actived: 相当于创建和挂载阶段
deactived: 相当于销毁阶段

生命周期执行顺序

1. 第一次加载会执行 beforeCreate，created，beforeMount，mounted

2. 父子组件第一次渲染执行顺序（子的渲染夹在父的beforeMount和mounted之间）：
   父beforeCreate->父created->父beforeMount-> 子组件加载四个阶段 ->父mounted

3. 更新子组件的数据：子beforeUpdate->子updated

4. 更新在父组件的数据（也在子组件渲染）：
   父beforeUpdate-子beforeUpdate->子updated-父updated

5. 销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed