Vue3 生命周期全面解析：从创建到销毁的完整指南

Vue3 作为前端开发的主流框架，其生命周期机制是组件开发的核心。理解生命周期不仅能优化性能，还能避免资源泄漏等问题。本文将深入剖析 Vue3 生命周期的每个阶段，结合代码示例和最佳实践，助你掌握组件从创建到销毁的全流程。

一、Vue3 生命周期概述

Vue3 的生命周期指组件从创建、挂载、更新到销毁的完整过程。Vue 在关键节点提供钩子函数（Hooks），允许开发者插入自定义逻辑。与 Vue2 相比，Vue3 的改动包括：

• 废弃 beforeCreate 和 created，由 setup() 替代；

• 重命名 beforeDestroy 为 beforeUnmount，destroyed 为 unmounted；

• 引入 Composition API，通过 onXxx 函数管理生命周期逻辑。

二、生命周期阶段详解

1. 初始化阶段：setup()

setup() 是 Composition API 的入口，在组件实例创建前执行。此时无法访问 this，但可接收 props 和 context 参数：

import { ref } from 'vue';

export default {
    setup(props, { attrs, slots, emit }) {
        const count = ref(0); // 初始化响应式数据
        const increment = () => count.value++;
        return { count, increment }; // 暴露给模板
    }
};

作用：集中管理数据、方法和生命周期钩子，避免与选项式 API 的冲突。

2. 创建阶段：onBeforeMount 与 onMounted

• onBeforeMount：在组件挂载前调用，此时 DOM 未生成，但模板已编译。适合进行初始化准备：

  import { onBeforeMount } from 'vue';
  
  onBeforeMount(() => {
      console.log('DOM 即将挂载，但当前不可见');
  });

• onMounted：组件挂载完成后调用，可安全操作 DOM。常用于第三方库初始化：

  import { onMounted } from 'vue';
  
  onMounted(() => {
      const chart = initChart(document.getElementById('chart'));
  });

最佳实践：在 onMounted 中发起异步请求，避免在 setup 中直接操作 DOM。

3. 更新阶段：onBeforeUpdate 与 onUpdated

• onBeforeUpdate：数据变化后、DOM 更新前调用。可获取更新前的 DOM 状态：

  import { onBeforeUpdate, ref } from 'vue';
  
  const message = ref('Hello');
  onBeforeUpdate(() => {
      console.log('数据已更新，DOM 尚未重渲染');
  });

• onUpdated：DOM 更新完成后调用。注意避免无限循环：

  import { onUpdated, ref } from 'vue';
  
  const count = ref(0);
  onUpdated(() => {
      count.value++; // 错误示例：会导致无限更新
  });

应用场景：根据数据变化调整滚动位置或动画效果。

4. 销毁阶段：onBeforeUnmount 与 onUnmounted

• onBeforeUnmount：组件卸载前调用，需清理定时器、取消请求等：

  import { onBeforeUnmount, ref } from 'vue';
  
  const timer = ref(null);
  onBeforeUnmount(() => {
      clearInterval(timer.value);
  });

• onUnmounted：组件卸载后调用，此时 DOM 已移除：

  import { onUnmounted } from 'vue';
  
  onUnmounted(() => {
      console.log('组件已销毁，资源已释放');
  });

关键点：务必在 onBeforeUnmount 中清理资源，防止内存泄漏。

5. 错误捕获：onErrorCaptured

处理子组件错误，支持返回 false 阻止错误传播：

import { onErrorCaptured } from 'vue';

onErrorCaptured((err, vm, info) => {
console.error('捕获到错误:', err);
    return true; // 默认继续传播
});

三、Vue3 与 Vue2 的生命周期对比

核心差异：

• Vue3 通过 setup() 统一管理初始逻辑，减少代码分散；

• 钩子函数需从 vue 导入，显式声明依赖；

• 支持 onActivated 和 onDeactivated 处理动态组件缓存。

四、生命周期实战示例

示例 1：数据初始化与请求

import { ref, onMounted } from 'vue';

export default {
    setup() {
        const data = ref([]);
        const fetchData = async () => {
            const response = await fetch('https://api.example.com/data');
            data.value = await response.json();
        };
        onMounted(fetchData);
        return { data };
    }
};

示例 2：资源清理与防抖

import { ref, onBeforeUnmount } from 'vue';

const searchInput = ref(null);
let timer = null;

const handleSearch = () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
        console.log('执行搜索逻辑...');
    }, 300);
};

onBeforeUnmount(() => {
    clearTimeout(timer);
});

五、最佳实践与常见问题

1. 避免在 onUpdated 中修改数据

// 错误示范

onUpdated(() => {
    count.value++; // 导致无限循环
});

2. 使用 onActivated 和 onDeactivated 优化动态组件

onActivated(() => {
    console.log('组件被激活');
});
onDeactivated(() => {
    console.log('组件被停用');
});

3. 调试技巧

通过 onRenderTracked 和 onRenderTriggered 追踪依赖变化：

import { onRenderTracked, onRenderTriggered } from 'vue';

onRenderTracked((e) => {
    console.log('依赖被追踪:', e.target);
});
onRenderTriggered((e) => {
    console.log('依赖被触发:', e.target);
});

六、总结

Vue3 的生命周期机制通过 Composition API 提供了更灵活的逻辑组织方式。开发者应重点关注：

• 在 setup() 中集中管理初始逻辑；

• 在 onMounted 中操作 DOM 或发起请求；

• 在 onBeforeUnmount 中清理资源；

• 避免在 onUpdated 中修改数据导致循环。

掌握这些阶段，不仅能提升代码质量，还能有效预防内存泄漏和性能问题。随着 Vue 生态的持续演进，生命周期钩子将继续作为组件开发的核心工具，助力构建高效、可维护的应用程序。