Vue3 生命周期钩子
组件从创建、挂载、更新到卸载，每个阶段都会触发对应的「钩子」函数。在合适的钩子里安排初始化、请求数据与清理资源，是写出稳定组件的基础。Vue3 同时提供选项式写法与带 on 前缀的组合式写法。
钩子对照表
| 选项式 | 组合式 | 触发时机 |
|---|---|---|
| beforeCreate | setup 顶层 | 实例初始化前 |
| created | setup 顶层 | 实例创建完成 |
| beforeMount | onBeforeMount | 首次渲染之前 |
| mounted | onMounted | 挂载到 DOM 之后 |
| beforeUpdate | onBeforeUpdate | 数据变化、重新渲染前 |
| updated | onUpdated | DOM 更新完成之后 |
| beforeUnmount | onBeforeUnmount | 组件卸载之前 |
| unmounted | onUnmounted | 组件卸载完成之后 |
组合式写法没有 beforeCreate 与 created，这些工作直接写在 setup 顶层即可。
挂载阶段：拉取数据
最常用的 mounted 钩子用来请求首屏数据：
import { ref, onMounted } from 'vue'
const users = ref([])
onMounted(async () => {
const res = await fetch('/api/users')
users.value = await res.json() // 数据返回后模板自动渲染
})
此时 DOM 已就绪，无论请求数据还是操作元素都安全。
更新阶段：监听 DOM 变化
onUpdated 在数据变化导致 DOM 重绘后触发：
onUpdated(() => {
console.log('界面已更新') // 输出：界面已更新
})
注意不要在钩子内再次修改响应式数据，否则会陷入渲染死循环。
卸载阶段：清理资源
定时器、事件监听等必须在卸载时清理，防止内存泄漏：
import { onMounted, onUnmounted } from 'vue'
let timer
onMounted(() => {
timer = setInterval(() => console.log('心跳'), 1000)
})
onUnmounted(() => {
clearInterval(timer) // 组件销毁时停止定时器
})
离开页面后控制台不再输出「心跳」，说明资源已正确释放。
缓存组件的激活钩子
组件被 KeepAlive 缓存时不会卸载，而是反复「激活、失活」：
import { onActivated, onDeactivated } from 'vue'
onActivated(() => console.log('组件被激活')) // 输出：组件被激活
onDeactivated(() => console.log('组件被缓存')) // 输出：组件被缓存
需要每次进入页面都刷新数据时，把请求写在 onActivated 而不是 onMounted 中。
小结
生命周期顺序为：创建 → 挂载 → 更新 → 卸载。请求数据放 onMounted，清理资源放 onUnmounted，缓存场景配合 onActivated 与 onDeactivated，按阶段做事即可让组件行为稳定可控。