初识 Vue3 生命周期 | 手把手带你玩转全生命周期钩子
作为一名前端老司机，我经常看到新同学在 Vue 生命周期上栽跟头。今天咱们就来扒一扒 Vue3 的生命周期到底怎么玩，附上超详细的 JavaScript 代码示例！
为什么 Vue 生命周期这么重要？
想象你正在搭建一座房子：
- 地基阶段：得先规划结构（对应
beforeCreate） - 框架搭建：开始搭钢架（对应
created） - 内外装修：粉刷墙壁安装灯具（对应
mounted） - 后期维护：修补漏水更换家具（对应
updated/unmounted）
Vue 生命周期就是这套精准的施工指南，帮你把控组件从出生到消亡的每一个关键节点。
Vue3 生命周期全景图
graph TD
A[beforeCreate] --> B[created]
B --> C[beforeMount]
C --> D[mounted]
D --> E[beforeUpdate]
E --> F[updated]
F --> G[beforeUnmount]
G --> H[unmounted]
小贴士：Vue3 把很多钩子搬到了组合式 API 里，我们主要关注
setup()里的生命周期
动手实操 | 从零开始搭建计时器组件
让我们通过构建一个简单的数字时钟组件，感受各个生命周期的魔法时刻
// 完整代码文件：CounterTimer.vue
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
setup() {
const count = ref(0)
let timerId = null
// 1. beforeCreate 替代方案 - 使用 ref 初始化前
onBeforeMount(() => {
console.log('准备开始挂载组件')
})
// 2. created 替代方案 - setup 执行时
console.log('组件刚创建完成，count 初始值:', count.value)
// 3. mounted 核心逻辑
onMounted(() => {
timerId = setInterval(() => {
count.value += 1
}, 1000)
console.log('组件已挂载，开启计时器')
})
// 4. beforeUpdate 前置操作
onBeforeUpdate(() => {
console.log('检测到数据变更，旧值:', count.value)
})
// 5. updated 后置操作
onUpdated(() => {
console.log('数据更新完成，新值:', count.value)
})
// 6. unmounted 清理工作
onUnmounted(() => {
clearInterval(timerId)
console.log('组件即将销毁，清除计时器')
})
return {
count
}
}
}
这个组件会经历完整的生命周期流程：
- 初始化时打印 count 初始值
- 挂载后启动计时器
- 每次数值更新前后打印日志
- 销毁时清理定时器
生命周期实战技巧
获取真实 DOM 的最佳时机
import { ref, onMounted } from 'vue'
export default {
setup() {
const inputRef = ref(null)
onMounted(() => {
inputRef.value.focus() // 确保 DOM 已经渲染
})
return { inputRef }
}
}
警惕异步操作陷阱
// 错误示范：在生命周期中进行异步操作
onMounted(async () => {
const data = await fetchData()
console.log(data) // 可能在组件卸载后才执行
})
复杂场景解决方案
当需要根据环境选择生命周期逻辑时：
if (import.meta.env.SSR) {
// 服务端渲染的特殊处理
} else {
onMounted(() => {
// 仅在客户端执行
})
}
高级玩法 | keep-alive 缓存的秘密
<template>
<div v-if="false"></div>
</template>
// 配合 keep-alive 使用的激活钩子
export default {
setup() {
onActivated(() => {
console.log('组件重新显示')
})
onDeactivated(() => {
console.log('组件即将隐藏')
})
}
}
新手常犯错误清单
| 危险行为 | 后果描述 | 解决方案 |
|---|---|---|
| 在 serverPrefetch 中操作 DOM | SSR 环境下报错 | 判断平台后再执行 |
| mounted 中直接修改 $props | 触发无限更新循环 | 使用 computed 处理属性 |
| 生命周期中使用箭头函数 | this 指向错误 | 改用普通函数定义 |
学习路径建议
- 第一阶段：对照官方文档实现所有生命周期钩子
- 第二阶段：重构现有项目，将所有 option API 转换为组合式 API
- 第三阶段：尝试在 SSR 环境中测试生命周期执行情况
现在你已经掌握了 Vue3 生命周期的核心用法！快去改造你的项目吧~ 如果遇到问题，欢迎在评论区交流讨论哦！
