摘要

生命週期鉤子是一些特殊的函數，它們會在一個元件從建立、掛載、更新到銷毀的整個生命週期的特定時間點被 Vue 自動呼叫。

定義與說明

Vue 為元件的生命週期提供了多個「鉤子」，讓我們可以在特定階段執行自己的程式碼。例如，在元件被渲染到畫面上之後（mounted），或者在元件即將被移除之前（beforeUnmount）。這讓我們能精準地管理資源和執行副作用。

實作範例

生命週期鉤子示例

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

// 元件掛載到 DOM 後執行
onMounted(() => {
  console.log('元件已掛載！');
  // 通常在此處進行 DOM 操作或資料獲取
});

// 元件從 DOM 中卸載前執行
onUnmounted(() => {
  console.log('元件即將卸載！');
  // 通常在此處清理計時器或事件監聽器
});
</script>

結論

生命週期鉤子為我們提供了在元件生命週期的關鍵時刻執行程式碼的能力，是進行副作用管理（如 API 請求、事件監聽）和資源清理的基礎。

生命週期鉤子副作用