Vue 3 生命周期钩子详解：从创建到销毁的完整流程

快速概述

Vue 3 生命周期钩子解决的核心问题是让开发者在组件从创建到销毁的各个关键节点执行自定义逻辑，例如初始化数据、发起请求、清理定时器或解绑事件监听。它适用于所有基于 Vue 3 构建的应用场景，包括单页应用、组件库开发以及服务端渲染项目。前置环境要求是已安装 Node.js 与 Vue CLI 或 Vite，并具备基础的 HTML、CSS 与 JavaScript 知识。

核心概念与原理

Vue 3 的生命周期本质上是一系列在组件实例不同阶段自动触发的回调函数。其工作流程可划分为四个主要阶段：创建（setup）、挂载（mount）、更新（update）与卸载（unmount）。Vue 3 组合式 API 中，这些钩子通过 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted 等函数显式注册。与选项式 API 不同，组合式 API 的钩子必须在 setup 函数内同步调用，以确保组件实例正确绑定。

实战步骤与代码

以下示例演示如何在 Vue 3 组合式 API 中完整使用生命周期钩子。

// 1. 导入所需钩子
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
export default { setup() { // 2. 定义响应式数据 const count = ref(0);
// 3. 挂载阶段：组件渲染到 DOM 后执行 onMounted(() => { console.log('组件已挂载，可访问 DOM'); // 可在此发起接口请求 });
// 4. 更新阶段：响应式数据变化触发重新渲染后执行 onUpdated(() => { console.log('组件已更新，当前 count:', count.value); });
// 5. 卸载阶段：组件销毁前清理资源 onUnmounted(() => { console.log('组件已卸载，清理定时器与事件监听'); });
// 6. 返回模板使用的数据与方法 return { count }; } };

若使用选项式 API，则直接在组件选项中声明对应钩子：

export default { data() { return { message: 'Hello Vue 3' }; }, mounted() { console.log('选项式 API 挂载完成'); }, unmounted() { console.log('选项式 API 卸载完成'); } };

常见坑点与优化

• 在 setup 外调用钩子：组合式 API 的钩子必须在 setup 内同步调用，否则会报错或无法正确绑定实例。
• 忘记清理资源：在 onMounted 中创建的定时器或事件监听，务必在 onUnmounted 中清除，否则会导致内存泄漏。
• 过度使用 onUpdated：频繁的数据更新会反复触发该钩子，应避免在其中执行复杂计算，建议使用计算属性或侦听器替代。
• 异步操作竞态：在钩子中发起异步请求时，组件可能已卸载，需在 onUnmounted 中设置标志位或取消请求，避免更新已卸载组件。

性能优化方面，应尽量将耗时操作放在 onMounted 中执行，避免阻塞初始渲染；同时利用 v-if 与 v-show 合理控制组件挂载与更新频率，减少不必要的生命周期触发。