vue3 中组件的生命周期详解
在 Vue 3 中，组件的生命周期（Lifecycle）是组件从 创建 → 挂载 → 更新 → 卸载 的一整套过程。
Vue 3 使用 组合式 API（Composition API） 和 选项式 API（Options API） 都可以定义生命周期钩子。
下面我们分阶段详细讲解每个生命周期阶段、对应的钩子函数、执行时机和使用方式。
🧩 一、生命周期的总体流程图
创建阶段 → 挂载阶段 → 更新阶段 → 卸载阶段
beforeCreate → created → beforeMount → mounted↑setup() 在 beforeCreate 和 created 之间执行
更新阶段：
beforeUpdate → updated
卸载阶段：
beforeUnmount → unmounted
🧱 二、生命周期阶段详解（选项式 API）
1️⃣ 创建阶段
| 钩子 | 执行时机 | 说明 |
|---|---|---|
| beforeCreate() | 实例初始化之后、数据观测 (reactivity) 之前 | 此时无法访问 data、computed、methods |
| created() | 实例创建完成后（数据已初始化） | 可访问 data、methods，但尚未挂载 DOM |
📘 示例：
export default {data() {return { msg: 'Hello Vue3' }},beforeCreate() {console.log('beforeCreate:', this.msg) // undefined},created() {console.log('created:', this.msg) // 'Hello Vue3'}
}
2️⃣ 挂载阶段
| 钩子 | 执行时机 | 说明 |
|---|---|---|
| beforeMount() | 在模板渲染到真实 DOM 之前执行 | 可访问虚拟 DOM（未渲染） |
| mounted() | 组件已被挂载到真实 DOM | 可访问 $el、操作 DOM、调用第三方库 |
📘 示例：
export default {mounted() {console.log('DOM 元素：', this.$el) // 可访问真实 DOM}
}
3️⃣ 更新阶段
| 钩子 | 执行时机 | 说明 |
|---|---|---|
| beforeUpdate() | 数据变更后、DOM 重新渲染前 | 可读取最新数据，但 DOM 尚未更新 |
| updated() | 数据变更导致的 DOM 更新完成后 | 可操作已更新的 DOM（谨慎操作，防止死循环） |
📘 示例：
export default {data() {return { count: 0 }},beforeUpdate() {console.log('beforeUpdate count:', this.count)},updated() {console.log('updated count:', this.count)}
}
4️⃣ 卸载阶段
| 钩子 | 执行时机 | 说明 |
|---|---|---|
| beforeUnmount() | 组件卸载前 | 可执行清理工作（如定时器、事件监听等） |
| unmounted() | 组件卸载完成后 | DOM 已被移除 |
📘 示例：
export default {beforeUnmount() {console.log('组件即将卸载')},unmounted() {console.log('组件已卸载')}
}
⚙️ 三、组合式 API（Composition API）中的生命周期
在 Vue 3 setup() 中不再使用 this，而是通过 onXxx 函数注册生命周期钩子。
| 选项式钩子 | 组合式 API 对应函数 |
|---|---|
| beforeCreate / created | 合并到 setup() 内执行 |
| beforeMount | onBeforeMount() |
| mounted | onMounted() |
| beforeUpdate | onBeforeUpdate() |
| updated | onUpdated() |
| beforeUnmount | onBeforeUnmount() |
| unmounted | onUnmounted() |
📘 组合式 API 示例：
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'export default {setup() {const count = ref(0)onMounted(() => {console.log('组件已挂载')})onUpdated(() => {console.log('组件更新了，count:', count.value)})onUnmounted(() => {console.log('组件卸载了')})return { count }}
}
🧠 四、特殊生命周期钩子（高级）
| 钩子函数 | 触发时机 | 用途 |
|---|---|---|
| onActivated() | <keep-alive> 缓存组件被激活时 | 恢复缓存组件状态 |
| onDeactivated() | <keep-alive> 缓存组件被停用时 | 暂停缓存组件任务 |
| onErrorCaptured() | 捕获子组件的错误时 | 全局错误处理或上报 |
| onRenderTracked() / onRenderTriggered() | 响应式调试工具 | 用于观察依赖追踪和触发更新的情况 |
📘 示例：
import { onActivated, onDeactivated, onErrorCaptured } from 'vue'export default {setup() {onActivated(() => console.log('组件被激活'))onDeactivated(() => console.log('组件被停用'))onErrorCaptured((err) => {console.error('捕获到子组件错误:', err)return false // 阻止继续向上传播})}
}
🪶 五、执行顺序总结
✅ 初次渲染：
beforeCreate → created → beforeMount → mounted
✅ 数据更新：
beforeUpdate → updated
✅ 卸载组件：
beforeUnmount → unmounted
✅ keep-alive 缓存组件：
activated → deactivated
📊 六、开发中常见用法场景
| 目标 | 推荐钩子 | 说明 |
|---|---|---|
| 初始化请求数据 | created / onMounted | 建议在 onMounted 中请求，保证 DOM 已准备好 |
| 操作 DOM / 第三方库 | mounted | DOM 渲染完毕 |
| 监听全局事件 | mounted 注册 → beforeUnmount 卸载 | |
| 定时器 | mounted 启动 → beforeUnmount 清理 | |
| 路由切换缓存组件恢复 | onActivated | |
| 调试渲染性能 | onRenderTracked / onRenderTriggered |