彻底理解Vue生命周期

初步介绍：

简单来说，vue 的生命周期有：

1. beforeCreate 创建前
2. create 创建后
3. boforeMount 挂载前
4. mounted 挂载后
5. beforeUpdate 数据更新前
6. updated数据更新后
7. beforeDestroy 销毁前
8. destroyed 销毁后

然后可以看看官网的生命周期分析图：

但实际上， 对生命周期，可以有更深刻的理解。

生命值周期的概念：

​ Vue 实例从创建到销毁的过程就是生命周期。即指从创建、初始化数据、编译模板、挂载Dom到渲染Dom、更新数据到渲染数据、再到销毁实例等一系列的过程。它主要分为8个阶段：创建前后、载入前后、更新前后、销毁前、销毁后，以及一些特殊场景的生命周期。如下表格所述：

生命周期	描述
beforeCreate	组件实例被创建初始
created	组件实例已经完全创建
beforeMount	组件挂载之前
mounted	组件挂载到实例上去之后
beforeUpdate	组件数据发生变化，更新之前
update	数据更新之后
beforeDestroy	组件实例销毁之前
destoryed	组件实例销毁之后
activated	keep-alive 缓存的组件被激活
deactivated	keep-alive 缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用

生命周期的整体流程：

1. beforeCreate --> created
   • 初始化实例完成；
2. created
   • 完成数据观测，属性与方法的运算，watch、event事件回调的配置。可调用methods中的方法，访问和修改 data数据触发响应式渲染DOM，可以通过computed和watch完成数据计算，此时还未创建虚拟DOM；
3. created --> beforeMount
   • 判断是否存在 el属性，若不存在则停止编译，直到调用 vm.$mount(el) 时才会继续编译；
   • 优先级：render > template > outerHTML
   • vm.el 获取到的是挂载的 DOM；
4. beforeMount
   • 在此阶段可以获取到 vm.el；
   • 此阶段 vm.el 虽然已经完成了 DOM的初始化，但还未挂载到 el选项上;
5. beforeMount --> mounted
   • 此阶段 vm.el 完成挂载， vm.$el 生成的虚拟DOM，被替换成了 el选项挂载的真实 DOM；
6. mounted
   • vm.el 已经完成DOM的挂载与渲染，虚拟DOM被替换成了el选项对应的真实DOM；
7. beforeUpdate
   • 更新的数据必须是被渲染在模板上的（el、template、render之一），才能被调用到；
   • 此时 view显示层还未更新；
   • 如果在 beforeUpdate 中再次修改数据，不会再次触发更新方法（beforeUpdate，updated）；
8. updated
   • 完成了 view显示层的更新；
   • 如果在 updated中再次修改数据，会再次触发更新方法（beforeUpdate，updated）；
9. beforeDestroy
   • 实例被销毁前调用，此时实例的属性和方法仍然可以进行访问；
10. destroyed
    • 完全销毁一个实例，清除它与其它实例之间的连接，解绑它的全部指令以及事件监听器，但是并不能清除DOM；
    • 执行的仅仅是销毁实例。

各个生命周期的用处：

生命周期	描述
beforeCreate	执行时组件实例还未创建，常用于插件开发中执行一些初始化任务
created	组件初始化完毕，各种数据可以使用，常用于异步获取数据
beforeMount	未执行渲染、更新，还未挂载DOM（DOM未创建）
mounted	初始化结束，挂载DOM（DOM已创建），可用于获取访问数据和DOM元素
beforeUpdate	更新前，可用于获取更新前实例的各种状态
updated	更新后，所有的状态已经是最新
beforeDestroy	实例销毁前，可用于一些定时器或者订阅的取消
destroyed	实例（组件）已经销毁，作用同上 beforeDestroy

获取数据时created和mounted的区别：

• created 是在实例（组件）一创建完成的时候就立刻调用，此时页面的 dom节点尚未生成；
• mounted 是在页面 dom节点渲染完成之后就立刻执行，created 的触发时机早于 mounted
• 都能获取到实例对象的属性和方法，但是放在 mounted中获取，可能会造成闪屏的现象，但如果实例在页面加载前完成则不会发生。

这里是万物之恋，下次再见了！