Vue3与Vue2生命周期对比及使用场景

Vue3 与 Vue2 生命周期对比及使用场景详解

一、核心区别

1. 钩子更名：
   • beforeDestroy → beforeUnmount（Vue3）
   • destroyed → unmounted（Vue3）
2. 新增调试钩子：
   • renderTracked：跟踪虚拟 DOM 渲染依赖（首次渲染和后续更新时触发）。
   • renderTriggered：追踪重新渲染的触发原因（仅更新时触发）。
3. Composition API 的影响：
   • 使用 setup() 替代 beforeCreate 和 created，生命周期钩子通过函数形式引入（如 onMounted）。
   • Options API 中的钩子名称在 Vue3 中依然有效，但更名后的钩子更推荐使用。

二、生命周期钩子对比表

三、各生命周期使用场景与优缺点

1. beforeCreate

   • 使用场景：插件初始化（如注入全局属性）。
   • 缺点：无法访问响应式数据和 DOM。
   • Vue3 变化：在 Composition API 中被 setup() 替代，代码直接写入 setup。

2. created

   • 使用场景：异步请求数据、初始化非 DOM 相关状态。
   • 优点：可访问响应式数据。
   • 缺点：无法操作 DOM。
   • Vue3：逻辑移至 setup() 中。

3. beforeMount

   • 使用场景：服务端渲染（SSR）中获取数据。
   • 注意：极少在客户端使用，避免在此阶段修改响应式数据。

4. mounted

   • 使用场景：操作 DOM（初始化图表库、地图）、监听浏览器事件。
   • 缺点：SSR 中不执行，可能导致客户端/服务端渲染不一致。
   • Vue3 注意：子组件的 mounted 不保证父组件已挂载。

5. beforeUpdate

   • 使用场景：获取更新前的 DOM 状态（如滚动位置）。
   • 风险：频繁触发时可能影响性能。

6. updated

   • 使用场景：依赖 DOM 的库更新（如重新渲染图表）。
   • 缺点：修改数据可能导致无限循环。

7. beforeUnmount（Vue3） / beforeDestroy（Vue2）

   • 使用场景：清理定时器、取消事件监听、销毁第三方库实例。
   • Vue3 改进：命名更准确，明确对应卸载阶段。

8. unmounted（Vue3） / destroyed（Vue2）

   • 使用场景：确认资源已释放（如日志记录）。

9. renderTracked & renderTriggered（Vue3 新增）

   • 使用场景：调试组件渲染性能，分析依赖变化。
   • 示例：

     onRenderTriggered((e) => {
       console.log('重新渲染由以下依赖触发：', e.target);
     });
     

四、Composition API vs Options API 生命周期差异

1. 注册方式：

   • Options API：通过组件选项声明。

     export default {
       mounted() {
         // 代码
       }
     }
     

   • Composition API：在 setup() 中引入钩子函数。

     import { onMounted } from 'vue';
     export default {
       setup() {
         onMounted(() => {
           // 代码
         });
       }
     }
     

2. 执行顺序：

   • Composition API 钩子（如 onMounted）先于 Options API 钩子（如 mounted）执行。

五、优缺点总结

• Vue3 改进：
  • 语义化：unmount 更准确描述组件卸载阶段。
  • 灵活性：Composition API 允许按需引入钩子，逻辑组织更集中。
  • 调试支持：新增的 renderTracked 和 renderTriggered 便于性能优化。
• 潜在问题：
  • 名称变化可能导致迁移成本（如 destroyed → unmounted）。
  • Composition API 的学习曲线较高，需适应新的代码组织方式。

六、迁移与最佳实践

• 迁移 Vue2 到 Vue3：
  • 替换 beforeDestroy 和 destroyed 为 beforeUnmount 和 unmounted。
  • 在 setup() 中优先使用 Composition API 钩子。
• 性能优化：
  • 避免在 mounted 或 updated 中执行耗时操作。
  • 使用 onRenderTracked 分析渲染依赖，减少不必要的更新。