组件的一生：创建（setup）→ 挂载到 DOM（onMounted）→ 数据变化触发更新（onUpdated）→ 卸载（onUnmounted）。挂载阶段最常用：onMounted 里发起请求、初始化第三方库（要 DOM 存在）；onUnmounted 里清理定时器/解绑监听，避免内存泄漏。
组合式 API 的钩子是 onXxx 形式（onMounted/onBeforeUnmount 等），与选项式 API 的 mounted/beforeUnmount 一一对应，但必须在 setup 同步执行期注册。生命周期的本质用途：「在正确的时机做事」——操作 DOM 必须在 onMounted 之后、清理副作用必须在 onUnmounted 之前。
<div id="app"><p ref="el">{{ n }}</p></div> <script> const { createApp, ref, onMounted, onUpdated, onUnmounted } = Vue; createApp({ setup() { const n = ref(0), el = ref(null), timer = ref(null); onMounted(() => { console.log('DOM 就绪:', el.value.textContent); // 拿 DOM fetch('/api/x').then(r => n.value = r); // 发请求 timer.value = setInterval(() => n.value++, 1000); }); onUpdated(() => console.log('视图更新:', n.value)); onUnmounted(() => clearInterval(timer.value)); // ★ 清理 }, }).mount('#app'); </script>