Vue生命周期

什么是 Vue 生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过程，称之为 Vue 的生命周期。

Vue 有几个生命周期，它们的作用主要是什么？

8 个，创建前/创建后、挂载前/挂载后、更新前/更新后、销毁前/销毁后。Vue生命周期的作用是方便我们通过它的生命周期，在业务代码中更好地操作数据，实现相关功能。

Vue生命周期详解过程

• 创建前/后：在 beforeCreated 阶段，Vue 实例的挂载元素 $el和数据对象data以及事件还未初始化。在created阶段，Vue实例的数据对象data以及方法的运算有了，$el 还没有。
• 载入前/后：在 beforeMount 阶段，render 函数首次被调用，Vue 实例的 $el 和 data 都初始化了，但还是挂载在虚拟的 DOM 节点上。在 mounted 阶段，Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互。
• 更新前/后：在数据更新之前调用，即发生在虚拟 DOM 重新渲染和打补丁之前，调用 beforeUpdate。在虚拟 DOM 重新渲染和打补丁之后，会触发 updated 方法。
• 销毁前/后：在执行实例销毁之前调用 beforeDestory，此时实例仍然可以调用。在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 Vue 实例已经解除了事件监听以及和 DOM 的绑定，但是 DOM 结构依然存在。beforeDestroy 钩子函数的执行时机是在 $destroy 函数执行最开始的地方，接着执行了一系列的销毁动作，包括从 parent 的 $children 中删掉自身，删除 watcher，当前渲染的 VNode 执行销毁钩子函数等，执行完毕后再调用 destroy 钩子函数。在 $destroy 的执行过程中，它又会执行 vm.patch(vm._vnode, null) 触发它子组件的销毁钩子函数，这样一层层的递归调用，所以 destroy 钩子函数执行顺序是先子后父，和 mounted 过程一样
• activated 和 deactivated 钩子函数是专门为 keep-alive 组件定制的钩子

第一次页面加载会触发 Vue 哪几个钩子？

会触发 4 个生命钩子：创建前/创建后、挂载前/挂载后

DOM 渲染在哪个周期就已经完成？

在 beforeMounted 时它执行了 render 函数，对 $el 和 data 进行了初始化，但此时还是挂载到虚拟的 DOM 节点，然后它在 mounted 时就完成了 DOM 渲染，这时候我们一般还进行 Ajax 交互。