Vue 3 生命周期钩子详解（含组合式 API 对比）

Vue 3 生命周期钩子详解（含组合式 API 对比）

Vue 3 的生命周期钩子经历了显著优化，与 Vue 2 相比，移除了 beforeCreate 和 created，并通过 组合式 API 提供了更灵活的逻辑组织方式。以下是完整生命周期图谱、组合式 API 对比及流程图：

一、生命周期阶段与钩子函数

阶段	选项式 API（Vue 2 风格）	组合式 API（Vue 3 风格）	触发时机	典型用途
创建阶段	beforeCreate, created	setup()	组件实例初始化时	注册响应式数据、方法
挂载阶段	beforeMount, mounted	onBeforeMount, onMounted	模板编译/渲染前后	DOM 操作、第三方库初始化
更新阶段	beforeUpdate, updated	onBeforeUpdate, onUpdated	响应式数据变化触发重新渲染前后	更新后操作（如滚动条定位）
卸载阶段	beforeUnmount, unmounted	onBeforeUnmount, onUnmounted	组件卸载前后	清除定时器、事件监听
错误处理	errorCaptured	onErrorCaptured	组件树中发生错误时	错误日志记录、降级处理
调试专用	-	onRenderTracked, onRenderTriggered	响应式依赖变化时	性能优化、依赖追踪

二、组合式 API 使用方式

import {
  onMounted,
  onUnmounted,
  onRenderTriggered
} from 'vue';

export default {
  setup() {
    // 模拟数据获取
    const fetchData = () => {
      console.log('Fetching data...');
    };

    // 挂载时执行
    onMounted(() => {
      fetchData();
      window.addEventListener('resize', handleResize);
    });

    // 卸载时清理
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    // 调试响应式依赖
    onRenderTriggered((event) => {
      console.log('Dependency changed:', event.key);
    });

    return { /* 暴露给模板的响应式数据 */ };
  }
};

三、关键变化与最佳实践

1. setup() 替代 beforeCreate/created

• 原因：组合式 API 将初始化逻辑集中到 setup()，无需单独钩子。
• 等价关系：

  // Vue 2
  export default {
    created() {
      this.fetchData();
    }
  }
  
  // Vue 3
  import { onMounted } from 'vue';
  export default {
    setup() {
      onMounted(() => {
        fetchData();
      });
    }
  }
  

2. 新增调试钩子

• onRenderTracked：跟踪所有触发重新渲染的响应式依赖。
• onRenderTriggered：精确捕获导致更新的特定依赖。
• 使用场景：

  import { onRenderTriggered } from 'vue';
  onRenderTriggered((event) => {
    console.log('Updated by:', event.key); // 输出类似 "data: count"
  });
  

3. 与服务端渲染（SSR）的集成

• 客户端专属钩子：

  import { onMounted } from 'vue';
  onMounted(() => {
    // 仅在客户端执行
    console.log('Client-side only code');
  });
  

四、生命周期流程图

引用：https://cn.vuejs.org/assets/lifecycle_zh-CN.W0MNXI0C.png

五、选型建议表

场景	推荐钩子	核心操作
初始化数据/方法	setup()	注册 ref/reactive，定义方法
DOM 操作/API 调用	onMounted	操作真实 DOM，调用浏览器 API
清理定时器/事件监听	onUnmounted	执行 clearTimeout，移除监听器
性能优化分析	onRenderTriggered	定位高频更新依赖，优化响应式逻辑

六、与 Vue 2 的核心差异

特性	Vue 2	Vue 3	改进点
钩子数量	8 个核心钩子	10 个核心钩子 + 2 个调试钩子	增强调试能力
组合式 API	需手动拆分逻辑	天然支持逻辑聚合	提升代码可维护性
TypeScript 支持	部分类型推导	全类型覆盖	减少类型错误

通过掌握 Vue 3 的生命周期钩子，您可以更精准地控制组件行为，特别是在组合式 API 中实现逻辑复用和性能优化。新增的调试钩子为复杂应用提供了重要的性能分析手段。