生命周期钩子：你需要知道的关键时机
生命周期钩子：你需要知道的关键时机
生命周期钩子让你在组件的不同阶段执行代码。理解它，调试和逻辑分离都会简单很多。
什么是生命周期
组件从创建到销毁，经历一系列阶段。Vue 在每个阶段提供钩子函数，让你在特定时机运行代码。
常用钩子一览
创建 → 挂载 → 更新 → 销毁
| 钩子 | 时机 |
|---|---|
onMounted | 组件挂载到 DOM 后 |
onUpdated | 组件更新后 |
onUnmounted | 组件卸载后 |
onBeforeMount | 挂载前 |
onBeforeUpdate | 更新前 |
onBeforeUnmount | 卸载前 |
onMounted | DOM 已经渲染完成 |
created | 实例创建完成（组合式 API 中不常用） |
beforeCreate | 实例创建前（组合式 API 中不常用） |
组合式 API 中的钩子
组合式 API 用 on 前缀的函数：
<script setup lang="ts">
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
const count = ref(0)
onMounted(() => {
console.log('组件挂载完成，DOM 已渲染')
})
onUpdated(() => {
console.log('组件更新了')
})
onUnmounted(() => {
console.log('组件卸载了')
})
</script>
几个关键钩子的用法
onMounted：获取 DOM
组件挂载后才能获取到 DOM 元素：
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const canvas = ref<HTMLCanvasElement | null>(null)
onMounted(() => {
// 这时候 canvas.value 才能拿到
if (canvas.value) {
const ctx = canvas.value.getContext('2d')
ctx?.fillRect(0, 0, 100, 100)
}
})
</script>
<template>
<canvas ref="canvas" width="200" height="200"></canvas>
</template>
onUnmounted：清理副作用
组件销毁时清理定时器、事件监听：
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
const timer = ref<number | null>(null)
timer.value = setInterval(() => {
console.log('每秒执行')
}, 1000)
onUnmounted(() => {
// 组件销毁时清除定时器
if (timer.value) {
clearInterval(timer.value)
}
})
</script>
onMounted 里发请求
页面加载后获取数据：
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const user = ref(null)
const loading = ref(true)
onMounted(async () => {
try {
const res = await fetch('/api/user')
user.value = await res.json()
} finally {
loading.value = false
}
})
</script>
<template>
<div v-if="loading">加载中...</div>
<div v-else>{{ user }}</div>
</template>
生命周期图
beforeCreate ← 实例刚创建
↓
created ← 实例创建完成，data 已设置
↓
beforeMount ← 挂载前，template 编译完成
↓
mounted ← DOM 已渲染，可以获取元素
↓
beforeUpdate ← 数据变化，DOM 更新前
↓
updated ← DOM 更新完成
↓
beforeUnmount ← 组件卸载前
↓
unmounted ← 组件卸载完成，DOM 已移除
不要做的事
- 不要在
onMounted之前获取 DOM（拿不到） - 不要在组件卸载后继续更新状态（会报错）
- 记得在
onUnmounted里清理定时器和监听器
总结
onMounted：DOM 渲染完成，可以操作 DOM、发请求onUpdated：数据变化后 DOM 更新完成onUnmounted：清理定时器、事件监听等副作用
下篇讲计算属性和侦听器，它们是处理响应式数据的两种方式。