就是要帶大家認識 Vue 元件「出生到死亡」的整個過程，以及可以在什麼時間點插入程式邏輯。

為什麼叫「生命週期」？

想像一個元件就像一艘飛船：

• 建造 → 發射 → 執行任務 → 回收 → 解體
  Vue 也一樣，每個元件從被建立到消失，中間都有特定階段，你可以在這些「觀測點」加程式。

Vue 3 常用的生命週期 Hooks

這些函式要在 <script setup> 內用 import { onMounted, onUpdated, onUnmounted } from 'vue' 來使用。

1.onBeforeMount

• 在元件即將被掛載到畫面前觸發。
• 元素還沒真的出現在 DOM 裡。

2.onMounted

• 在元件已經被加到畫面上後觸發。
• 最常用：拿 DOM、發 API、啟動計時器。

3.onBeforeUpdate

• 在資料改變、DOM 即將更新前觸發。
• 可以看到「舊的畫面」。

4.onUpdated

• 在 DOM 已經根據新資料更新完成後觸發。
• 適合做需要依賴「更新後畫面」的動作。

5.onBeforeUnmount

• 在元件要被銷毀前觸發。
• 可以先做清理（例如關掉 WebSocket）。

6.onUnmounted

• 元件已被完全移除。
• 常見用途：清理計時器、事件監聽。

宇宙範例：黑洞觀測站

想像我們做一個「探測器元件」，進入黑洞時要記錄狀態，離開時要清理。
App.vue：

<template>
  <div>
    <h2>🛰️ 黑洞探測器</h2>
    <p>位置：{{ position }}</p>
    <button @click="toggle">切換探測器顯示</button>
    <Probe v-if="showProbe" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Probe from './Probe.vue'

const showProbe = ref(true)
const position = ref('黑洞邊緣')

function toggle() {
  showProbe.value = !showProbe.value
  position.value = showProbe.value ? '黑洞邊緣' : '已撤離'
}
</script>

Probe.vue：

<template>
  <p>🚀 探測器啟動中… (看 console)</p>
</template>

<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('✅ 探測器已進入黑洞觀測站')
})

onUpdated(() => {
  console.log('🔄 探測器數據已更新')
})

onUnmounted(() => {
  console.log('❌ 探測器已撤離黑洞，關閉觀測')
})
</script>

效果：

• 一開始 Probe 出現 → console 印「✅ 探測器已進入黑洞」。
• 當資料或畫面變動時 → console 印「🔄 數據已更新」。
• 當 v-if 關閉 Probe → console 印「❌ 探測器已撤離」。

總結

• 生命週期 = 元件的出生到死亡過程。
• 最常用的三個：onMounted（初始載入）、onUpdated（資料更新後）、onUnmounted（銷毀時清理）。
• 運用這些 hook，就能讓你的元件在正確時間點做正確的事。

明天我們要再來實戰做看看To do list~!

參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3