生命周期
组件从创建到销毁会经历固定阶段，每个阶段有对应的生命周期钩子，让我们能在恰当时机插入自己的逻辑。完整顺序：setup（组件创建，逻辑初始化）→ onMounted（挂载完成，页面能看到组件了）→ onUpdated（响应式数据导致视图更新后）→ onUnmounted（卸载前）。
最常用的是首尾两个：onMounted 里做「页面就绪后才能做的事」——发请求拉数据、初始化图表库、读取 DOM 尺寸；onUnmounted 里做「善后」——清除定时器、解绑全局事件、取消未完成的请求。漏掉清理是内存泄漏的头号来源：组件都销毁了，定时器还在跑。
日常开发 80% 的场景只需要 onMounted 和 onUnmounted，其余用到再查。别在 onMounted 之前访问 DOM——那时元素还不存在。
本节要点常用钩子：onMounted 发请求/初始化，onUnmounted 清定时器/解绑事件；记住「挂载后才能碰 DOM」。
代码
<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
const list = ref([]);
let timer = null;
// 挂载完成：DOM 已就绪，适合发请求、初始化
onMounted(async () => {
console.log('mounted：页面已经能看到组件了');
timer = setInterval(() => console.log('轮询中……'), 3000);
// const data = await fetch('/api/list'); ...
});
// 视图因数据变化而更新后触发
onUpdated(() => {
console.log('updated：视图刚更新过（别在这里改数据，会死循环）');
});
// 卸载前：必须清理副作用，否则内存泄漏
onUnmounted(() => {
clearInterval(timer); // 清定时器
window.removeEventListener('resize', onResize); // 解绑全局事件
console.log('unmounted：组件已卸载，善后完毕');
});
function onResize() { /* ... */ }
</script>
<!-- 执行顺序：setup → onMounted → onUpdated → onUnmounted -->
