Vue 3 生命週期完全指南：掌握 Composition API 鉤子函數與實戰優化

在開發 Vue 3 應用程式時，理解元件從建立、掛載、更新到銷毀的整個生命週期（Lifecycle），是編寫高效能、低耦合程式碼的關鍵基本功。

Vue 3 引入了 Composition API，使得生命週期鉤子（Lifecycle Hooks）的宣告方式與 Vue 2 有了顯著的不同。本文將帶您全面掌握 Vue 3 生命週期的運作機制以及實戰中的效能優化心法。

生命週期流程

這裡展示了完美的 Vue 生命週期流程，每個 Vue 元件從被建立到被銷毀，會歷經一系列的生命週期階段。Vue 在每個關鍵時刻都提供了對應的生命週期函式，讓您可以在特定時機插入自訂邏輯。

在 Composition API 中，所有生命週期鉤子都在 setup() 內部呼叫，以 on 開頭命名。

【建立階段】
    ↓
  setup()           ← 所有 Composition API 邏輯在這裡（無法存取 DOM）
    ↓
【掛載】
    ↓
  onBeforeMount()   ← DOM 尚未建立，很少使用
    ↓
  onMounted()       ← DOM 已建立，最常用
    ↓
【資料更新】
    ↓
  onBeforeUpdate()  ← DOM 更新前
    ↓
  onUpdated()       ← DOM 更新後
    ↓
【銷毀階段】
    ↓
  onBeforeUnmount() ← 元件即將銷毀
    ↓
  onUnmounted()     ← 元件已銷毀，清理資源的地方

生命週期語法使用

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

console.log("setup");

onBeforeMount(() => {
  console.log("onBeforeMonut");
});

onMounted(() => {
  console.log("onMounted");
});

onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});

onUpdated(() => {
  console.log("onUpdated");
});

onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});

onUnmounted(() => {
  console.log("onUnmounted");
});
</script>

結論：生命週期效能優化最佳實踐

為了確保 Vue 3 應用程式具有極佳的效能與搜尋引擎友善度，請遵循以下核心原則：

• 不要在 onUpdated 中修改響應式狀態：在 onUpdated 中修改資料會再次觸發資料變更，進而重新觸發更新，這極易導致 無窮更新迴圈，造成網頁卡死。
• 善用非同步元件降低初始載入時間：結合生命週期，非核心元件可以使用 defineAsyncComponent() 進行延遲載入，優化 Google Core Web Vitals 的 LCP（最大內容繪製）指標。
• 精準控管副作用：在生命週期之外，例如：非同步內建立的監聽器或訂閱，必須在 onUnmounted 中確實呼叫其銷毀函數，以免造成效能浪費。

同場加映：Vue 2 vs Vue 3 生命週期對比

在 Vue 3 的 Composition API 中，程式碼的核心入口是 setup() 函數。因此，Vue 2 中的 beforeCreate 和 created 階段，在 Vue 3 中直接由 setup() 函數本身取代，無需任何額外的鉤子。

其他的生命週期鉤子則加上了 on 前綴，並且需要從 vue 中明確匯入：

Vue 2 Options API	Vue 3 Composition API	觸發時機與用途
beforeCreate / created	setup()	元件初始化，建立響應式狀態。此時 DOM 尚未產生。
beforeMount	onBeforeMount	組件即將被掛載到 DOM 之前執行。
mounted	onMounted	組件已成功掛載到 DOM。適合執行 API 請求、DOM 操作。
beforeUpdate	onBeforeUpdate	響應式資料改變，但 DOM 尚未重新渲染。
updated	onUpdated	資料改變且 DOM 已完成更新。避免在此修改狀態以防無窮迴圈。
beforeDestroy	onBeforeUnmount	元件即將被銷毀（卸載）前。適合清除定時器、解除全域事件。
destroyed	onUnmounted	元件已完全銷毀，所有專屬監聽器與子組件皆已釋放。