Vue 3 的生命周期钩子（Life Cycle Hooks）是你写 Vue 组件时最关键的一套流程，就像“组件的一生”会经历哪些阶段，从创建、渲染，到更新、销毁，Vue 提供了一套函数让你在关键节点做你想做的事。
用通俗易懂 + 开发实例 + 场景讲解方式带你搞懂👇
🧭 一、什么是生命周期钩子？
简单说：生命周期钩子就是 Vue 组件“活着”的每个阶段，你都可以插入自己的代码来干点事。
比如你想：
- 初始化数据；
- 页面渲染完后获取 DOM；
- 组件更新时触发动画；
- 页面销毁时清理定时器或监听器...
这些都需要用生命周期钩子来做！
🛠 二、Vue 3 的生命周期钩子一览（Composition API）
| 阶段 | 钩子函数 | 作用简介 |
|---|---|---|
| 创建前 | setup() |
一切的开始，组件初始化逻辑 |
| 初始化后 | onBeforeMount() |
DOM 还没挂载，做最后准备 |
| 挂载完成 | onMounted() |
DOM 渲染好了，可以操作 DOM/发请求 |
| 更新前 | onBeforeUpdate() |
DOM 更新前，你可以保存旧数据 |
| 更新后 | onUpdated() |
DOM 更新完了，可以执行动画等操作 |
| 卸载前 | onBeforeUnmount() |
组件销毁前做清理，比如定时器 |
| 卸载后 | onUnmounted() |
彻底没了，执行最后释放工作 |
| 错误捕获 | onErrorCaptured() |
子组件报错时的兜底处理 |
| 调试用 | onRenderTracked() / onRenderTriggered() |
调试响应式依赖用 |
📚 三、常用生命周期钩子 + 场景详解
1️⃣ setup()
Vue 3 中的核心入口函数，你写的 Composition API 代码全都在这里写！
setup() {
const count = ref(0)
return { count }
}🟢 场景举例：
- 定义响应式变量；
- 调用 API；
- 注册生命周期钩子；
2️⃣ onMounted()
页面 DOM 渲染完成后执行。类似 Vue 2 的
mounted()。
import { onMounted } from 'vue'
onMounted(() => {
console.log('页面挂载完成了，可以操作 DOM 或发请求')
})🟢 常用场景：
- 获取元素宽高；
- 请求后端数据；
- 初始化图表（如 echarts）；
- 注册事件监听器（如
window.addEventListener）；
3️⃣ onBeforeUnmount() 和 onUnmounted()
组件要销毁前 / 销毁后，适合清理副作用。
onBeforeUnmount(() => {
console.log('组件要销毁了，开始清理定时器')
})
onUnmounted(() => {
console.log('彻底卸载完了')
})🟢 常用场景：
- 清除
setInterval,setTimeout; - 卸载自定义监听器；
- 断开 websocket；
- 清理插件实例；
4️⃣ onBeforeUpdate() & onUpdated()
当响应式数据发生变化，组件将更新 DOM，这两个钩子包裹着更新过程。
onBeforeUpdate(() => {
console.log('DOM 要更新啦，还没开始')
})
onUpdated(() => {
console.log('DOM 更新完毕')
})🟢 常用场景：
- 比较新旧数据差异；
- 做动画过渡；
- 手动操作 DOM 后更新回调逻辑；
5️⃣ onErrorCaptured()
用于捕捉子组件的运行时错误，避免整个页面白屏。
onErrorCaptured((err, instance, info) => {
console.error('子组件报错了：', err)
return false // 返回 true 会阻止进一步冒泡
})🟢 场景举例：
- 子组件接口异常；
- 渲染抛出错误；
- 第三方库抛异常；
🎯 四、组合式 API vs 选项式 API 的写法区别
| 生命周期阶段 | Vue 3（组合式） | Vue 2 / Vue 3（选项式） |
|---|---|---|
| 挂载完成 | onMounted(() => {}) |
mounted() {} |
| 卸载前 | onBeforeUnmount(() => {}) |
beforeDestroy() {} |
| 更新后 | onUpdated(() => {}) |
updated() {} |
👉 组合式 API 需要手动 import，但代码组织更清晰。
🧪 五、完整开发场景串联举例
import { ref, onMounted, onBeforeUnmount } from 'vue'
export default {
setup() {
const count = ref(0)
let timer = null
onMounted(() => {
timer = setInterval(() => {
count.value++
}, 1000)
})
onBeforeUnmount(() => {
clearInterval(timer)
})
return { count }
}
}📌 这段代码表示：
- 组件一加载：开启定时器，每秒加 1；
- 页面销毁前：自动清理定时器，防止内存泄漏。
✅ 总结一下（通俗版）：
| 钩子 | 你可以把它想象成... |
|---|---|
setup() |
出生准备室，创建状态和功能 |
onMounted() |
出生那一刻，页面长出来了 |
onBeforeUpdate() |
页面要变了，先准备一下 |
onUpdated() |
页面变好了，看起来没问题了 |
onBeforeUnmount() |
临走前收拾东西，别留垃圾 |
onUnmounted() |
真走了，最后回头看一眼（不是必须的） |