[面试必备] 深度剖析 Vue3 生命周期

组合式生命周期

生命周期钩子	描述
onBeforeMount	在挂载开始之前被调用（组件实例被创建后）。
onMounted	在挂载完成后被调用（组件挂载到DOM树上后）。
onBeforeUpdate	在更新发生之前被调用（响应式依赖发生改变之前）。
onUpdated	在更新完成后被调用（组件的 DOM 已经更新完毕）。
onBeforeUnmount	在卸载开始之前被调用（组件实例被销毁前）。
onUnmounted	在卸载完成后被调用（组件实例被销毁后）。
onErrorCaptured	当捕获组件树中的一个错误时被调用。
onRenderTracked	当一个响应式依赖被跟踪时调用，主要用于调试。
onRenderTriggered	当虚拟 DOM 重新渲染时调用，也主要用于调试。

执行顺序

1. setup()
   • 定义响应式状态（reactive、ref）。
   • 创建计算属性（computed）和函数。
   • 返回模板中需要绑定的响应式数据和方法。
   • 定义生命周期钩子。
   • 注意：此时组件的 props、slots 和父组件上下文已经可用，但 DOM 尚未挂载。
2. onBeforeMount
   • 执行组件挂载前的逻辑。
   • 适合初始化一些不依赖 DOM 的逻辑，如设置事件监听器。
   • 此时组件的 template 和虚拟 DOM 还没有创建。
3. onMounted
   • 获取和操作 DOM 元素。
   • 发送异步请求获取组件需要的数据。
   • 设置与 DOM 相关的第三方库（比如初始化滑动库）。
   • 注意：只会运行一次。
4. onBeforeUpdate
   • 准备更新前的状态。
   • 在 DOM 被重新渲染和打补丁之前使用。
   • 可以执行更新前的最后一次 DOM 状态读取，例如滚动位置。
5. onUpdated
   • 更新 DOM 后执行。
   • 需要操作更新后的 DOM 时使用。
   • 重新计算由于 DOM 布局变化引起的值，如滚动位置、尺寸等。
6. onBeforeUnmount
   • 执行清理任务。
   • 移除组件使用的事件监听器和定时器。
   • 取消 API 请求或订阅（如果有）。
7. onUnmounted
   • 组件销毁后执行。
   • 完成组件卸载后，需要完全清除的任务。
   • 注意：此时组件的所有指令已解绑，所有事件监听器已移除，所有子实例已卸载。
8. onErrorCaptured
   • 捕获组件树中的错误并进行处理。
   • 日志记录、发送错误报告、降级渲染等。
9. onRenderTracked
   • 开发调试时跟踪依赖的渲染。
   • 诊断性能问题。
10. onRenderTriggered
    • 开发调试时观察何时导致组件渲染。
    • 找出导致组件无效渲染的原因。