Vue（2 | 3） 生命周期

生成周期

Vue2

1. create 阶段：vue 实例被创建
   • beforeCreate：创建前，此时 data 和 methods 中的数据还没有初始化
   • created：创建完毕，此时 data 中有值，未挂载
2. mount 阶段：vue 实例被挂载到真实 DOM 节点
   • beforeMount：此时可以发起服务端请求，获取数据
     • 页面呈现的时未经 Vue 编译的 DOM 结构
     • 所有对 DOM 的操作，最终都不奏效
   • mounted：此时可以操作 DOM
     • 页面呈现的是经过 Vue 编译的 DOM
     • 对 DOM 的操作均有效（尽可能避免），至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
3. update 阶段：当 vue 实例里面的 data 数据变化时，触发的组件的重新渲染
   • beforeUpdate：数据是新的，但页面是旧的（页面尚未与数据同步）
   • updated：数据是新的，页面也是新的（页面与数据同步）
4. distroy 阶段：vue 实例被销毁
   • beforeDestroy：销毁前
     • vm 中所有的 data、methods、指令等都处于可用状态，马上要执行销毁过程
     • 一般在此阶段：关闭定时器、取消订阅消息，解绑自定义事件等收尾操作
   • destroyed：销毁后

组件生命周期

生命周期（父子组件）：父 beforeCreate --> 父 created --> 父 beforeMount --> 子 beforeCreate --> 子 created --> 子 beforeMount --> 子 mounted --> 父 mounted --> 父 beforeUpdate --> 子 beforeDestroy --> 子 destroyed --> 父 updated

加载渲染过程：父beforeCreate --> 父 created --> 父 beforeMount --> 子 beforeCreate --> 子 created --> 子 beforeMount --> 子 mounted --> 父 mounted

挂载过程：父 created --> 子 created --> 子 mounted --> 父 mounted

父组件更新过程：父 beforeUpdate --> 父 updated

子组件更新过程：父 beforeUpdate --> 子 beforeUpdate --> 子 updated --> 父 updated

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

路由组件独有的两个生命周期

1. activated：路由组件被激活时触发
2. deactivated：路由组件失活时触发

Vue3

与 Vue2 的生命周期对应关系：

1. beforeCreate ==> setup()
2. created ==> setup()
3. beforeMount ==> onBeforeMount
4. mounted ==> onMounted
5. beforeUpdate ==> onBeforeUpdate
6. updated ==> onUpdated
7. beforeDestroy ==> onBeforeUnmount
8. destroyed ==> onUnmounted