生命週期 是
➤ 簡單來說是 Vue 元件從「建立」到「銷毀」的過程中，會經歷一系列的階段，每個階段都可以讓你執行對應的邏輯，例如資料初始化、掛載 DOM、清理資源等
Vue 在建立元件時，會依照一定流程執行一連串的生命週期函式（也稱為 Hooks），讓開發者能在適當時機操作元件邏輯。
生命週期階段
setup()
- 元件邏輯的起點（Composition API）
- 這裡可以定義 reactive、methods、watchers 等
- 不可存取 DOM，也還沒掛載 template
onBeforeMount()
- 元件尚未掛載到 DOM 前呼叫
- 適合做最後的初始化，但仍無法操作 DOM
onMounted()
- 元件已掛載，DOM 已經可操作
- 常用於：讀取資料、啟動畫面動畫、操作 DOM 元素等
onBeforeUpdate()
- DOM 更新前觸發（當 reactive 資料變動時）
- 可以用來記錄 DOM 更新前的狀態
onUpdated()
- DOM 完成更新後呼叫
- 可用來對比變動前後的狀態或重新操作 DOM
onBeforeUnmount()
- 元件即將被卸載（例如頁面跳轉）
- 適合清除計時器、取消訂閱等
onUnmounted()
- 元件已完全卸載
- 通常用來釋放資源，避免記憶體洩漏
| 階段 | 描述 | 常用函式 | 類比說明 |
|---|---|---|---|
| 創建中 | 狀態與響應系統建立完成 | setup() | 演員正在化妝準備登場 |
| 掛載前 | DOM 還沒出現 | onBeforeMount() | 布景正裝，觀眾還沒看到演出 |
| 掛載後 | DOM 被插入頁面 | onMounted() | 演員登場，觀眾鼓掌（可以操作 DOM） |
| 更新前 | 資料改變但畫面還沒更新 | onBeforeUpdate() | 演員剛聽到台詞改了，準備重新演出 |
| 更新後 | 畫面已更新完成 | onUpdated() | 改完台詞的演員順利完成新一場演出 |
| 卸載前 | 即將從畫面消失 | onBeforeUnmount() | 演員要下台了，鞠躬中 |
| 卸載後 | 元件完全移除 | onUnmounted() | 燈暗了、演員回休息室 |
為什麼要懂生命週期？
⏱ 掌握執行時機
確保你的資料、動畫或副作用只在適當時機執行，避免錯誤或效能問題
🧼 善用清理邏輯
在元件卸載時釋放資源（例如：事件監聽、WebSocket、interval）
⚙️ 結合第三方套件
如果你需要整合像 chart.js、Swiper 等，只能在 onMounted 後才能操作 DOM 插入這些元件