生命週期
元件從建立、掛到畫面上、更新、到卸載，都會經過固定階段。你在對的階段做事，就不必把請求或 timer 塞進亂處。官方：Lifecycle Hooks。
最常用的幾個
Composition API 的 hook 名稱對應 Options 的 mounted 等，只是改成函式：
<script setup>
import { onMounted, onUnmounted } from 'vue'
let timer
onMounted(() => {
timer = setInterval(() => { /* 輪詢 */ }, 5000)
})
onUnmounted(() => {
clearInterval(timer)
})
</script>
| Hook | 何時跑 | 典型用途 |
|---|---|---|
onMounted |
元件已插入 DOM | 讀 ref 對到的元素、打首屏 API、綁原生事件 |
onUpdated |
DOM 因響應式更新而改完 | 少用；多數情況用 watch 或 nextTick 就夠 |
onUnmounted |
元件即將銷毀 | 清 timer、取消請求、解綁 listener |
onBeforeMount |
掛載前 | 很少需要 |
還有 onActivated／onDeactivated（搭配 <KeepAlive>）、以及 SSR 用的 onServerPrefetch。入門記住 mounted 開始、unmounted 結束 即可。
實務原則
- 在
onMounted打 API 可以，但若依賴某個 prop／route 參數，用watch(..., { immediate: true })更穩，因為參數之後還會變。 - 不要假設
onMounted時子元件也全部 ready；要操作子元件 DOM，用 template ref 或再等一個nextTick。 - Options API 對應：
mounted↔onMounted，unmounted↔onUnmounted。不要兩套混在同一個元件裡。
把「訂閱／請資料／清資源」這組模式抽出來，就是下一頁的 Composables。
推薦影音
Vue 組件結構：生命週期
來源：彭彭的課程
繁中示範元件掛上畫面、更新、卸載時會跑哪些回呼。對應本頁表格；Composition API 名稱是 onMounted 等，觀念相同。
Vue JS 3 Tutorial #11 — The Composition API (part 2)
來源：Net Ninja 約 43 分鐘
約 8 分起講 setup 裡的生命週期 hook，後面接著 fetch 與 composable。對應本頁與下一頁 Composables。