[toc]

Lecture07-生命周期

1、本节讲什么

学会"在组件的特定时刻执行代码"——最主要的就是 onMounted（组件显示到页面上之后），常用于"一进页面就请求数据"。

应用场景：

事件驱动：

• 常规情况：由用户行为触发

• 特殊情况：由程序执行到特定阶段触发，例如：页面组件加载完成时向后端索取数据

问：页面都加载完了，还索取数据干嘛？或者说，数据还没拿到的时候，怎么能算页面加载完成？

答：空的水杯准备好了，需要接水 这里我们说的“页面组件加载”完成并不包括数据加载完成，组件相当于水杯，数据相当于水

2、概念速览

什么是生命周期：一个组件从"创建 → 显示(挂载) → 更新 → 销毁"要经历几个阶段。Vue 在每个阶段提供钩子函数，你可以在关键时刻写自己的代码。

钩子函数：框架在设计的时候，考虑到某个地方允许用户自己开发一些功能；用户自定义的功能就需要挂在框架给的钩子上。当框架执行到钩子这个位置时，就会执行我们挂在上面的代码。

为什么需要它：有些事必须在"页面显示出来之后"才能做。比如请求后端数据（onMounted）、组件销毁时清理定时器（onUnmounted）。

正确 vs 误区：不是所有代码都放生命周期里。纯数据计算用 computed，数据加载放 onMounted，别把什么都塞进生命周期。

3、先看效果

组件一挂载到页面，就自动打印一行日志：

<script setup lang="ts">
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

const count = ref(0)

// onMounted：组件第一次显示到页面后执行（最常用）
onMounted(() => {
  console.log('组件已挂载到页面，准备请求数据')
})

// onUpdated：数据更新导致页面更新后执行（少用）
onUpdated(() => {
  console.log('组件更新了，count =', count.value)
})

// onUnmounted：组件被销毁/离开页面时执行（清理用）
onUnmounted(() => {
  console.log('组件销毁，清理定时器/监听器')
})
</script>

<template>
  <p>count: {{ count }}</p>
  <button @click="count++">+1</button>
</template>

4、照着做

1. 替换 App.vue，打开控制台（第 8 节）。
2. 看初始日志"已挂载"；点 +1，看"更新"日志。
3. 把页面切走（如果配了路由）或刷新，体会"挂载/销毁"的时机。

5、常见疑问

• Q：onMounted 是什么时机？ A：组件第一次显示到页面上之后。常用于"一进页面就请求后端数据"（第 35 节实战会用到）。
• Q：还有别的生命周期吗？ A：常用的就 onMounted（挂载后）。onUpdated（更新后）、onUnmounted（销毁前清理）用到再查，不必现在记全。
• Q：为什么要在 onMounted 里请求数据，而不是直接在 <script setup> 里？ A：请求往往依赖"页面已经就绪"。放在 onMounted 是 Vue 约定的"进页面就初始化"的位置，代码结构也清晰。直接写在顶层虽然能跑，但不符合习惯、不好管理。
• Q：生命周期钩子怎么记？ A：记核心一个：onMounted = "页面刚显示，去做初始化"。其余用到查文档即可。

6、规范要点

• 数据请求放在 onMounted，别放在 watch 里绕圈子。
• 定时器、事件监听器等用完要在 onUnmounted 清理，避免内存泄漏。
• 生命周期里只写"这个时刻该做的事"，复杂逻辑抽成函数再调用。

7、本节验证

• 能说清生命周期 = 创建 → 挂载 → 更新 → 销毁这几个阶段 ✅
• 会用 onMounted 在组件显示到页面之后请求数据 ✅
• 知道 onUpdated / onUnmounted 各自的时机与用途 ✅
• 记得定时器、事件监听器要在 onUnmounted 里清理 ✅