深入浅出：图解Vue 3生命周期的全流程网站首页 技术交流

深入浅出：图解Vue 3生命周期的全流程

秋水为渡 2025-07-20 00:01:04

简介深入浅出：图解Vue 3生命周期的全流程

在Vue开发中，生命周期是一个核心概念，它描述了Vue实例从创建到销毁的完整过程。理解生命周期不仅有助于编写更高效的代码，还能避免许多潜在问题。本文将详细解析Vue 3的生命周期，并结合Options API与Composition API的差异，探讨每个阶段的实际应用场景。

一、生命周期总览：从“诞生”到“消亡”

Vue的生命周期可以分为四个核心阶段：

初始化阶段（Initialization）
挂载阶段（Mounting）
更新阶段（Updating）
卸载阶段（Unmounting）

每个阶段都有对应的钩子函数（Hook），开发者可以在这些钩子中插入自定义逻辑。
Vue 3在保留Options API的基础上，通过Composition API引入了更灵活的setup()函数，生命周期钩子也以onXxx的形式存在（如onMounted）。

二、初始化阶段：组件的“出生前准备”

1. `beforeCreate`（Options API） / `setup()`（Composition API）

触发时机：实例初始化后，数据观测和事件配置之前。
特点：
- 此时data、methods等尚未初始化，无法访问响应式数据。
- 在Composition API中，setup()函数替代了beforeCreate和created，所有初始化逻辑应在此处编写。

应用场景：

初始化非响应式的全局配置（如第三方库）。

示例代码：

// Composition API
setup() {
  const nonReactiveConfig = loadExternalConfig(); // 加载外部配置
  return { nonReactiveConfig };
}

2. `created`（Options API） / `setup()`（Composition API）

触发时机：数据观测和事件初始化完成，但DOM尚未生成。
特点：
- 可以访问data、methods等响应式数据。
- 在Composition API中，setup()的逻辑在此阶段执行完毕。

应用场景：

发起异步请求（如从API获取数据）。

示例代码：

// Options API
created() {
  this.fetchData(); // 请求数据
}

三、挂载阶段：组件与DOM的“首次见面”

3. `beforeMount`（Options API） / `onBeforeMount`（Composition API）

触发时机：模板编译完成，但尚未将虚拟DOM渲染为真实DOM。
特点：
- 此时访问DOM元素（如this.$refs）会得到undefined。

应用场景：

在渲染前修改某些数据（例如根据条件动态设置样式）。

4. `mounted`（Options API） / `onMounted`（Composition API）

触发时机：虚拟DOM已挂载到页面，真实DOM生成完成。
特点：
- 可以安全操作DOM（如初始化图表库ECharts）。
- 在Composition API中，常用onMounted执行副作用操作。

应用场景：

集成第三方DOM库（如地图、图表）。

示例代码：

// Composition API
import { onMounted } from 'vue';
setup() {
  onMounted(() => {
    const chart = echarts.init(document.getElementById('chart'));
    chart.setOption({ /* ... */ });
  });
}

四、更新阶段：数据的“动态响应”

5. `beforeUpdate`（Options API） / `onBeforeUpdate`（Composition API）

触发时机：数据变化后，但DOM重新渲染前。
特点：
- 可以获取更新前的DOM状态。

应用场景：

记录滚动位置，更新后恢复用户浏览状态。

6. `updated`（Options API） / `onUpdated`（Composition API）

触发时机：DOM重新渲染完成。
警告：
- 避免在此钩子中修改数据，否则可能触发无限循环！

应用场景：

在DOM更新后执行依赖DOM的操作（如调整元素尺寸）。

五、卸载阶段：组件的“优雅退场”

7. `beforeUnmount`（Options API） / `onBeforeUnmount`（Composition API）

触发时机：组件实例销毁前。
特点：
- 此时组件仍完全可用。

应用场景：

清除定时器、取消事件监听。

示例代码：

// Composition API
import { onBeforeUnmount } from 'vue';
setup() {
  const timer = setInterval(() => {}, 1000);
  onBeforeUnmount(() => clearInterval(timer));
}

8. `unmounted`（Options API） / `onUnmounted`（Composition API）

触发时机：组件实例销毁后。
特点：
- 所有子组件和事件监听器已被移除。

应用场景：

释放内存密集型资源（如WebSocket连接）。

六、生命周期流程图解

根据提供的流程图，Vue 3的生命周期可以简化为以下步骤：

初始化阶段：setup() → beforeCreate（隐式） → created（隐式）。
挂载阶段：onBeforeMount → 编译模板 → onMounted。
更新阶段：数据变化 → onBeforeUpdate → 重新渲染 → onUpdated。
卸载阶段：onBeforeUnmount → 销毁实例 → onUnmounted。

七、Options API vs Composition API：如何选择？

Options API：
适合简单场景，逻辑分散在data、methods等选项中。

export default {
  created() { /* 初始化逻辑 */ },
  mounted() { /* DOM操作 */ }
}

Composition API：
适合复杂组件，逻辑通过setup()集中管理，支持更灵活的代码组织。

import { onMounted, onUnmounted } from 'vue';
export default {
  setup() {
    onMounted(() => { /* DOM操作 */ });
    onUnmounted(() => { /* 清理逻辑 */ });
  }
}