2024年中复习梳理：Vue的生命周期
定义
Vue框架中，都有一个Vue实例的概念。每个Vue实例都会有一个从被创建、初始化、编译模板、挂载、渲染、更新、卸载这样的过程。
作用
让Vue的使用者能够在Vue实例化的过程中，通过暴露的生命周期函数去写自定义的逻辑，更好的控制Vue。
理解
从Vue2官网上对生命周期函数的理解图来分析：
对于Vue2版本提供的生命周期函数理解如下：
| 生命周期函数 | 运行时机 | 说明 |
|---|---|---|
| beforeCreate | 实例初始化完成， props 被解析后 | 初始化事件和生命周期后，数据观测和事件配置之前 data和methods选项还未初始化，无法访问this 可以获取全局store或自定义属性挂载在Vue上 |
| created | 组件实例处理完所有与状态相关的选项后 | 数据观测和事件配置之后，挂载还未开始 可访问data和methods选项，做一些异步操作 |
| beforeMount | 挂载前 | 模板编译结束，尚未渲染到DOM |
| mounted | 挂载后 | 模板已经渲染到DOM，可操作DOM,获取一些远程数据 |
| beforeUpdate | 更新前 | 数据更新但是DOM重新渲染前。可处理一些数据 |
| updated | 更新后 | 数据完成更新后，DOM已经重新渲染，可操作更新后的DOM |
| beforeDestroy | 卸载前(组件) | 组件实例销毁前，实例还存在，可进行一些清理 |
| destroyed | 卸载后(组件) | 组件实例销毁后，所有的事件监听器和子组件也都被移除触发 |
| activated | keep-alive 组件被激活时 | keep-alive 组件被激活时触发activated 钩子函数 |
| deactivated | keep-alive 组件被停用时 | keep-alive 组件被停用会触发deactivated钩子函数 |
| errorCaptured | 捕获错误 | 捕获一个来自子孙组件的错误时调用，常用于全局错误处理 |
从Vue3官网上对生命周期函数的理解图来分析：
对于Vue3版本提供的生命周期函数理解如下：
| 生命周期函数 | 运行时机(组件实例) | 说明 |
|---|---|---|
| setup | 实例创建前 | 组件的初始化设置，setup 函数会在组件实例创建前执行， 接收 props 和 context 作为参数，可以在其中进行初始化操作。但需要注意的是，在 setup() 中无法访问 this |
| onBeforeMount | 挂载前 | 模板编译结束，尚未渲染到DOM |
| onMounted | 挂载后 | 模板已经渲染到DOM，可操作DOM,获取一些远程数据 |
| onBeforeUpdate | 更新前 | 数据更新但是DOM重新渲染前。可处理一些数据 |
| onUpdated | 更新后 | 数据完成更新后，DOM已经重新渲染，可操作更新后的DOM |
| onBeforeUnMount | 卸载前 | 组件实例销毁前，实例还存在，可进行一些清理 |
| onUnmounted | 卸载后 | 组件实例销毁后，所有的事件监听器和子组件也都被移除触发 |
| onActivated | keep-alive 组件被激活时 | 组件被插入到 DOM 中时触发activated 钩子函数 |
| onDeactivated | keep-alive 组件被停用时 | 组件从 DOM 中被移除时触发deactivated钩子函数 |
| onErrorCaptured | 捕获错误 | 捕获一个来自子孙组件的错误时调用，常用于全局错误处理 |
| onRenderTracked | 渲染期间时 | 捕获组件渲染的过程中哪些数据被访问，哪些数据被修改，性能优化，dev环境调试用 |
| onRenderTriggered | 渲染期间，于tracked对立 | 跟踪引起渲染的原因。性能优化，dev环境调试用 |
| onServerPrefetch | 组件实例在服务器上被渲染之前 | 服务端的数据抓取过程 |
适用场景
beforeCreate
实例初始化完成， props 被解析后。
数据观察事件机制都未形成，不能获得DOM节点。
data，computed，watch，methods 上的方法和数据均不能访问。
可在此阶段，添加loading。一些早期的初始化设置,设置全局变量、初始化事件总线、设置响应式数据
created
组件实例创建完成，数据初始化结束。还未挂载DOM，不能操作DOM。
能拿到data，computed，watch，methods上的方法。
可在此阶段，执行一些初始化逻辑。
可修改data中的数据，初始化数据和转换。
发送异步请求，但是不宜过多，避免白屏时间太长。
结束loading。
在此阶段进行DOM操作需要放在nextTick()回调中。
beforeMount
项目中比较少用。
可在此阶段，做最后数据的修改，避免过度使用，影响性能。在不阻塞组件的挂载过程下，预加载一些图片、数据文件、第三方库等
mounted
挂载完成，完成了vm.$el和双向绑定。
可在此阶段，操作DOM；
集成第三方库，如果第三方库需要操作DOM,在此阶段进行初始化和集成比较合适。
继续请求后端数据
启动定时器，比如轮询请求计算结果。
注册全局事件监听器。
配合路由钩子处理一些逻辑。
beforeUpdate
可在此阶段，访问和处理更新前的DOM。
数据备份，用于后续的比较和恢复
手动移除事件监听器等
updated
可在此阶段，执行一些依赖DOM的操作。
数据的二次处理和验证。执行动画效果。
避免在此阶段操作数据，修改属性，避免进入死循环
beforeDestroy
可在此阶段，做一些子实例、监听器、组件、事件定时器的清理
删除提示、自动保存提示
注销全局事件的监听
destroyed
可在此阶段，清理定时器，避免内存泄漏。
关闭第三方库的链接，数据库和地图库链接
一些组件释放和清理，取消事件的订阅
第一次加载触发的生命周期钩子
第一次加载组件，beforeCreate、created、beforeMount、mounted 这四个生命周期函数
父子组件生命周期执行顺序
Vue中父子组件的生命周期执行顺序遵循以下步骤：
- 加载渲染阶段：
- 父组件首先执行
beforeCreate、created、beforeMount。 - 然后子组件执行
beforeCreate、created、beforeMount。 - 最后，子组件被挂载到
DOM中，执行mounted，接着父组件也执行mounted。
- 父组件首先执行
- 更新阶段：
- 当数据变化时，父组件首先执行
beforeUpdate。 - 接着子组件执行
beforeUpdate，然后执行updated。 - 最后，父组件也执行
updated。
- 当数据变化时，父组件首先执行
- 销毁阶段：
- 父组件首先执行
beforeDestroy。 - 然后子组件执行
beforeDestroy，最后执行destroyed。 - 父组件随后也执行
destroyed。
- 父组件首先执行
这种执行顺序确保了父组件在逻辑上“等待”其子组件完成各自的初始化、更新和销毁过程.
异步请求通常放哪个生命周期
可以放在created、beforeMount、mounted中进行调用。在这3个钩子函数中，data已经创建，可以对服务端返回的数据赋值。
通常放在created中比较多，好处就是能更快的获取到服务端数据、减少loading时间。SSR不支持brforeMount、mouted钩子函数，所以放在created中可以保持一致性。
总结
Vue3 中移除了一些生命周期钩子函数（如beforeCreate、created、beforeDestroy、destroyed）并将它们替换为onBorefoeUnMount、onUnMount和create相关的被setup组合式API取代， setup() 函数来统一处理组件创建和初始化阶段的逻辑。其他的都是在前面加上on.
Vue3新增了一些dev环境做性能优化的钩子函数（如onRenderTracked、onRenderTriggered），用于本地调试性能。
