Vue生命周期钩子通过currentInstance统一注册到对应数组并按序执行，onMounted等组合式API在setup后注册；Vue3钩子严格对应状态节点，需配对清理副作用，迁移时注意命名与执行上下文差异。
如果您正在深入理解 Vue 组件的运行机制，却发现生命周期行为难以预测或 hook 执行顺序不符合预期，则很可能是对内部注册与触发机制缺乏底层认知。以下是 Vue 生命周期原理解析与常用 Hook 的具体应用示例：
一、Vue 生命周期钩子的注册与执行原理
Vue 的生命周期钩子并非独立运行，而是依托于当前组件实例的 currentInstance 进行统一注册与调度。每个钩子函数（如 onMounted）本质是向实例对应生命周期类型数组中追加回调。
1、当调用 onMounted(() => { ... }) 时，实际执行的是 injectHook('mounted', hook, target)；
2、injectHook 函数检查 target 实例上是否存在 mounted 数组，若无则初始化为空数组；
立即学习“前端免费学习笔记（深入）”；
3、将传入的回调函数 push 到该数组末尾；
4、在组件进入挂载后阶段时，Vue 内部遍历并同步执行 mounted 数组中的全部函数；
5、所有组合式 API 钩子均在 setup() 执行完毕后、选项式 API 的 beforeCreate 之前完成注册。
二、Vue 3 常用官方 Hook 及触发时机
Vue 3 提供的组合式 API 生命周期钩子严格对应组件状态流转节点，每个钩子仅在特定上下文中有效，且不支持在非 setup 或非组件作用域中调用。
1、onBeforeMount：组件挂载前触发，此时模板已编译但尚未插入 DOM；
2、onMounted：组件真实 DOM 已挂载至页面，可安全访问 $el；
3、onBeforeUpdate：响应式数据变更已发生，虚拟 DOM 尚未重新渲染；
4、onUpdated：虚拟 DOM 已完成 patch，真实 DOM 更新完毕；
5、onBeforeUnmount：组件即将被卸载，实例仍完全可用；
6、onUnmounted：组件已从 DOM 中移除，所有事件监听器与子组件均已销毁；
7、onActivated：配合
8、onDeactivated：组件失活、进入缓存状态时触发；
9、onErrorCaptured：捕获来自后代组件的错误，接收 error、instance、info 三个参数；
10、onRenderTracked 与 onRenderTriggered：用于调试响应式依赖追踪过程，分别在依赖被收集和被触发时调用。
三、Vue 2 与 Vue 3 生命周期钩子对照与迁移要点
Vue 2 的选项式生命周期钩子（如 beforeDestroy、destroyed）在 Vue 3 中已被重命名为 beforeUnmount 和 unmounted，语义更精确且与组合式 API 保持命名一致性。迁移时需注意执行上下文差异。
1、Vue 2 的 beforeDestroy 必须替换为 Vue 3 的 onBeforeUnmount，且必须在 setup() 内调用；
2、Vue 2 的 destroyed 对应 Vue 3 的 onUnmounted，不可再通过 this.$destroy() 显式触发；
3、Vue 2 的 beforeCreate 和 created 在组合式 API 中由 setup() 函数体隐式覆盖，无需显式声明；
4、Vue 3 中 onMounted 不保证子组件已完成挂载，如需等待全部子组件就绪，应使用 nextTick 嵌套或 onActivated（针对 KeepAlive 场景）；
5、Vue 2 的 updated 钩子在 Vue 3 中对应 onUpdated，但禁止在此钩子中修改响应式状态，否则将引发无限更新循环。
四、自定义 Hook 的封装规范与复用实践
Vue 3 鼓励将跨组件逻辑抽象为以 use 开头的函数，即自定义 Hook。其本质是调用多个内置组合式 API（包括生命周期钩子），并返回响应式状态或操作函数。
1、自定义 Hook 必须在 setup() 或其他组合式函数内调用，不得在普通函数或事件回调中直接使用；
2、useWindowSize 示例中，需在 onMounted 注册 resize 监听器，并在 onBeforeUnmount 中清除，避免内存泄漏；
3、useFetch 类 Hook 应在 onBeforeMount 或 created（选项式）发起请求，确保不因组件未挂载而丢失响应；
4、所有副作用操作（如定时器、事件监听、WebSocket 连接）必须配对注册与清理，清理逻辑统一置于 onBeforeUnmount 或 onUnmounted；
5、自定义 Hook 返回的状态应始终通过 ref 或 reactive 包裹，确保响应式穿透性。
