第四节：核心概念高频题-Vue生命周期钩子变化
重命名：beforeDestroy→beforeUnmount，destroyed→unmounted
新增：onServerPrefetch（SSR场景）
Vue 生命周期钩子变化详解（Vue2 → Vue3）
一、核心钩子重命名与语义优化
-
销毁阶段语义化升级
• Vue2 钩子：beforeDestroy（销毁前）→ Vue3 钩子：onBeforeUnmount（卸载前）• Vue2 钩子：
destroyed（销毁后）→ Vue3 钩子：onUnmounted（卸载后）• 变化意义：从“销毁”到“卸载”的术语调整更准确描述组件从 DOM 中移除的过程。例如，
onUnmounted更明确表示组件已从 DOM 树中脱离，所有事件监听和子组件已被清理。 -
选项式 API 与组合式 API 的对应关系
• Options API：仍支持 Vue2 的钩子名称（如beforeDestroy），但官方推荐使用新命名。• Composition API：需显式引入函数式钩子（如
import { onBeforeUnmount } from 'vue'），并在setup()中注册。
二、新增生命周期钩子
-
onServerPrefetch（服务端渲染专用）
• 作用：在服务端渲染（SSR）时预取数据，确保组件在客户端注水（hydration）前完成异步操作。• 使用场景：
import { onServerPrefetch } from 'vue'; export default {setup() {const data = ref(null);onServerPrefetch(async () => {data.value = await fetchData(); // 服务端预取数据});return { data };} };• 优势：解决 Vue2 中 SSR 数据获取逻辑分散的问题（如需在
created和mounted中区分客户端与服务端逻辑）。 -
调试钩子（开发环境专用）
•onRenderTracked：追踪组件渲染依赖的响应式数据变动。•
onRenderTriggered：定位触发重新渲染的具体依赖变化。• 示例：
onRenderTriggered((e) => {console.log('重新渲染由以下依赖触发：', e.target); // 输出触发更新的变量 });
三、其他关键变化
-
初始化阶段合并
• Vue2：beforeCreate（数据未初始化）和created（数据已初始化）分两个阶段。• Vue3：通过
setup()函数统一替代，逻辑集中处理响应式数据和生命周期注册。 -
执行顺序调整
• Composition API 优先：setup()中的钩子（如onMounted）先于 Options API 的mounted执行。• 父子组件顺序：保持“父 beforeMount → 子完整挂载 → 父 mounted”的流程，确保子组件优先就绪。
-
缓存组件钩子
• 新增：onActivated（组件激活）和onDeactivated（组件失活），用于<keep-alive>缓存的组件状态管理。• 示例：
onActivated(() => {console.log('组件从缓存恢复，重新连接 WebSocket'); });
四、迁移与最佳实践
-
升级建议
• 替换销毁钩子：全局替换beforeDestroy→onBeforeUnmount，destroyed→onUnmounted。• SSR 优化：将服务端数据预取逻辑迁移至
onServerPrefetch，避免客户端重复请求。• 组合式优先：在
setup()中使用函数式钩子，提升代码组织性和 Tree-shaking 优化效果。 -
常见误区
• 避免在updated中修改数据：可能引发无限循环更新，应改用watch或nextTick。• 卸载阶段资源释放：在
onBeforeUnmount中清理定时器、事件监听和第三方库实例。
五、总结
Vue3 的生命周期钩子变化体现了对语义精确性、SSR 支持和开发体验的深度优化。通过重命名、新增专用钩子和组合式 API 的整合，开发者能更精准地控制组件行为，同时提升大型应用的性能与可维护性。迁移时需重点关注钩子名称替换、setup() 逻辑整合和 SSR 场景的适配。