組件的生命週期
## Vue 組件生命週期概念
Vue 組件從「建立、掛載、更新」到「卸載」的過程，稱為**生命週期（Lifecycle）**。在不同階段，Vue 提供生命週期鉤子（Lifecycle Hooks），讓我們可以執行特定工作。
常見階段如下：
1. **建立階段**
- 組件初始化資料、事件與響應式狀態。
- Composition API 常用 `setup()`。
2. **掛載階段**
- 組件的模板已經渲染成 DOM，並插入頁面。
- 常用：
- `onMounted()`
- Options API 的 `mounted()`
- 適合取得 DOM、呼叫 API、設定計時器等。
3. **更新階段**
- 當響應式資料改變，組件會重新渲染。
- 常用：
- `onUpdated()`
- Options API 的 `updated()`
4. **卸載階段**
- 組件即將從頁面移除。
- 常用：
- `onBeforeUnmount()`
- `onUnmounted()`
- 適合清除計時器、事件監聽器或取消訂閱，避免記憶體洩漏。
---
## 簡單範例：組件掛載後啟動計時器
```vue
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const seconds = ref(0)
let timer
onMounted(() => {
console.log('組件已掛載到 DOM')
timer = setInterval(() => {
seconds.value++
}, 1000)
})
onUnmounted(() => {
console.log('組件即將被移除')
clearInterval(timer)
})
</script>
<template>
<p>已經過了 {{ seconds }} 秒</p>
</template>
```
### 執行流程
- 組件完成畫面渲染後，執行 `onMounted()`。
- `setInterval()` 每秒讓 `seconds` 加 1，畫面會自動更新。
- 當組件被移除時，執行 `onUnmounted()`，清除計時器。
清除計時器很重要，否則即使組件已經離開畫面，計時器仍可能繼續執行。
相關學習地圖、教學課程
F2E 網站前端工程