生命周期
生命周期指组件从创建到销毁经历的阶段：创建（setup/data）→ 挂载到 DOM（mounted）→ 数据更新引发重新渲染（updated）→ 卸载（unmounted）。在每个阶段 Vue 提供对应的钩子函数，让我们插入逻辑。
常用场景：mounted 里发请求、加事件监听、初始化第三方库；unmounted 里清理定时器与监听，防止内存泄漏；updated 里做依赖新 DOM 的操作（但多数情况应该用 watch/nextTick 代替）。组合式 API 中钩子前加 on：onMounted、onUnmounted。
- mounted：DOM 已就绪，发请求/加监听/初始化库
- unmounted：清理定时器、事件监听，防内存泄漏
- 组合式写法：onMounted(() => {})，setup 本身即 created
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>生命周期</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <button @click="show = !show">{{ show ? '销毁' : '重建' }}组件</button> <clock v-if="show"></clock> </div> <script> const { createApp, ref, onMounted, onUnmounted, onUpdated } = Vue; const app = createApp({ setup() { return { show: true }; } }); app.component('clock', { setup() { let timer = null; const now = ref(new Date().toLocaleTimeString()); onMounted(() => { console.log('mounted：已挂载，启动定时器'); timer = setInterval(() => { now.value = new Date().toLocaleTimeString(); }, 1000); }); onUpdated(() => console.log('updated：时间更新')); onUnmounted(() => { console.log('unmounted：清理定时器'); clearInterval(timer); // 不清理会一直空转 }); return { now }; }, template: '<p>现在时间：{{ now }}</p>' }); app.mount('#app'); </script> </body> </html>
本节要点记住三对：setup/created 做初始化、onMounted 做 DOM 相关、onUnmounted 做清理；updated 少用。
