Vue 生命周期钩子详解：从创建到销毁的完整流程与实战应用

快速概述

Vue 生命周期钩子用于在组件从创建到销毁的各个阶段执行自定义逻辑，如初始化状态、处理 DOM 操作等。它解决的核心问题是让开发者精确控制组件在不同时间点的行为，适用于数据初始化、异步请求、DOM 操作、资源清理等场景。前置环境要求：Node.js 环境及 Vue 3 项目（或通过 CDN 引入 Vue）。

核心概念与原理

Vue 3 的生命周期主要包含以下阶段：setup() 为组件初始化阶段，用于设置响应式状态和执行其他初始化操作。挂载阶段包含 onBeforeMount() 与 onMounted()，更新阶段包含 onBeforeUpdate() 与 onUpdated()，卸载阶段包含 onBeforeUnmount() 与 onUnmounted()。Vue 实例（vm）是框架的入口，包含页面业务处理逻辑与数据模型，生命周期中的多个事件钩子让控制实例过程更易形成良好逻辑。

实战步骤与代码

步骤 1：创建 Vue 3 项目

使用 Vite 创建项目：

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

步骤 2：在组件中注册生命周期钩子

以下代码展示 Vue 3 组合式 API 的完整生命周期用法：

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
const count = ref(0)
// 初始化阶段：设置响应式状态 console.log('setup: 组件初始化')
onBeforeMount(() => { console.log('onBeforeMount: 挂载前') })
onMounted(() => { console.log('onMounted: 挂载完成，可操作 DOM') // 在此处执行 DOM 操作或发起异步请求 })
onBeforeUpdate(() => { console.log('onBeforeUpdate: 更新前') })
onUpdated(() => { console.log('onUpdated: 更新完成') })
onBeforeUnmount(() => { console.log('onBeforeUnmount: 卸载前，清理定时器/事件监听') })
onUnmounted(() => { console.log('onUnmounted: 卸载完成') }) </script>

步骤 3：父子组件执行顺序

在创建阶段，父组件的 setup() 与 onBeforeMount() 先执行，随后子组件完成其创建与挂载，最后父组件执行 onMounted()。更新和卸载阶段，父组件同样会等待子组件完成相应操作。

常见坑点与优化

• created 中操作 DOM：在 created() 钩子执行时 DOM 并未渲染，此时进行 DOM 操作无效，必须将代码放入 Vue.nextTick() 回调中。
• 避免箭头函数：含 this 的函数大多不要使用箭头函数，因为期望 this 指向 Vue 实例。
• 清理资源：在 onBeforeUnmount() 中清理定时器、事件监听器，防止内存泄漏。
• 性能优化：将异步请求放在 onMounted() 中发起，避免阻塞初始化；使用 v-if 控制组件销毁以触发卸载钩子。