12. 生命周期钩子

本节目标：理解组件从创建到销毁的完整周期，掌握常用生命周期钩子的用法。

生命周期概览

每个 Vue 组件实例都要经历一系列初始化步骤：设置数据观测、编译模板、挂载到 DOM、数据变化时更新 DOM。在这个过程中，会在特定阶段调用生命周期钩子，让你有机会插入自己的代码。

创建 → 挂载 → 更新 → 销毁

注册生命周期钩子

Composition API 用 onXxx 函数注册钩子：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载！')
})
</script>

Important

钩子必须在 setup() 或 <script setup> 里同步注册。异步注册（比如 setTimeout 里）不会生效。

常用钩子

onMounted

组件完成初始渲染并创建 DOM 节点后调用。适合做需要访问 DOM 的操作：

import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  // el.value 就是模板里 ref="el" 的元素
  el.value.focus()
})

onUpdated

组件因响应式状态变化重新渲染后调用。适合在 DOM 更新后操作 DOM：

import { onUpdated } from 'vue'

onUpdated(() => {
  // DOM 已经更新了
})

onUnmounted

组件卸载后调用。适合清理副作用：

import { onUnmounted } from 'vue'

onUnmounted(() => {
  // 清理定时器、取消订阅等
  clearInterval(timer)
})

完整生命周期

除了上面三个常用的，还有其他钩子：

钩子	时机
`onBeforeMount`	挂载前
`onMounted`	挂载后
`onBeforeUpdate`	更新前
`onUpdated`	更新后
`onBeforeUnmount`	卸载前
`onUnmounted`	卸载后

还有 onActivated、onDeactivated（<KeepAlive> 相关）和 onErrorCaptured（捕获后代组件错误）等。

使用场景

onMounted 最常见的用途：

访问或操作 DOM 元素
发起网络请求获取初始数据
初始化第三方库

import { ref, onMounted } from 'vue'

const data = ref(null)

onMounted(async () => {
  const response = await fetch('/api/data')
  data.value = await response.json()
})

onUnmounted 最常见的用途：

清理定时器
取消事件监听
中止网络请求

import { onMounted, onUnmounted } from 'vue'

let timer

onMounted(() => {
  timer = setInterval(() => {
    // 做点什么
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})

本节回顾

组件从创建到销毁经历一系列生命周期阶段
onMounted 挂载后执行，适合操作 DOM 和获取初始数据
onUpdated 更新后执行
onUnmounted 卸载后执行，适合清理副作用
钩子必须同步注册