2025.3.5

Vue 3 的生命周期钩子函数是用于在组件的不同阶段执行特定逻辑的函数。它们帮助我们管理组件的状态、数据和行为，从而构建复杂的、交互性强的应用程序。以下是 Vue 3 生命周期的详细解析：

---

一、Vue 3 生命周期钩子的分类

Vue 3 的生命周期钩子可以分为两类：

1. 选项 API 钩子：与 Vue 2 类似，需要在组件选项对象中声明。
2. Composition API 钩子：Vue 3 新增的 API，允许在 setup 函数中使用，更加灵活和模块化23。

---

二、Vue 3 的生命周期阶段及钩子函数

Vue 3 的生命周期主要分为以下几个阶段，每个阶段都有对应的钩子函数：

1. 创建阶段

• setup：
  • 说明：Vue 3 新增的钩子，是 Composition API 的入口。在组件实例创建之后、初始渲染之前执行。
  • 使用场景：初始化响应式数据、定义方法等3。
• onBeforeMount：
  • 说明：在组件挂载到 DOM 之前调用。
  • 使用场景：在 DOM 渲染前执行一些操作23。
• onMounted：
  • 说明：在组件挂载到 DOM 之后调用。
  • 使用场景：操作 DOM、发起异步请求等23。

2. 更新阶段

• onBeforeUpdate：
  • 说明：在组件数据更新导致重新渲染之前调用。
  • 使用场景：在更新前执行一些逻辑23。
• onUpdated：
  • 说明：在组件重新渲染并更新 DOM 之后调用。
  • 使用场景：在更新后执行一些操作23。

3. 卸载阶段

• onBeforeUnmount：
  • 说明：在组件卸载之前调用。
  • 使用场景：清理定时器、移除事件监听器等23。
• onUnmounted：
  • 说明：在组件卸载并清理资源之后调用。
  • 使用场景：释放资源、取消订阅等23。

---

三、Vue 3 生命周期钩子的使用示例

以下是一个使用 Composition API 的 Vue 3 组件示例，展示了生命周期钩子的使用：

<template>
  <div>
    <h2>当前计数：{{ count }}</h2>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

// 响应式数据
const count = ref(0);

// 方法
function increment() {
  count.value++;
}

// 生命周期钩子
onBeforeMount(() => {
  console.log('挂载之前');
});

onMounted(() => {
  console.log('挂载完毕');
});

onBeforeUpdate(() => {
  console.log('更新之前');
});

onUpdated(() => {
  console.log('更新完毕');
});

onBeforeUnmount(() => {
  console.log('卸载之前');
});

onUnmounted(() => {
  console.log('卸载完毕');
});
</script>

在这个示例中，onMounted 用于在组件挂载后打印日志，onUpdated 用于在组件更新后执行操作，onUnmounted 用于在组件卸载后清理资源3。

---

四、Vue 3 生命周期的最佳实践

1. 优先使用 Composition API：它更简洁、更易于维护2。
2. 避免在钩子中执行耗时操作：以免影响性能2。
3. 合理使用钩子：仅在需要时使用，避免过度使用2。
4. 错误处理：在钩子中使用 try...catch 捕获错误2。

---

五、总结

Vue 3 的生命周期钩子为我们提供了在组件不同阶段执行逻辑的能力。通过合理使用这些钩子，可以更好地管理组件的状态和行为，构建高效、可维护的应用程序23。