核心生命週期實戰場景

以下是開發中最常使用的三個核心階段，我們來看看對應的程式碼該如何撰寫。

初始化與 API 請求：setup 與 onMounted

• setup：適合用來初始化響應式變數，例如：ref()、reactive() 或呼叫不依賴 DOM 的初始邏輯。
• onMounted：此時虛擬 DOM 已轉換為實體 DOM，適合用來操作 DOM，例如：初始化網頁圖表 Chart.js 或發送非同步 API 請求。

const isLoading = ref(true);
const userData = ref(null);

// 1. 同步執行於 setup 階段
console.log("元件初始化開始...");

// 2. 組件掛載完成後觸發
onMounted(async () => {
  console.log("DOM 已就緒，準備撈取資料");
  try {
    const response = await fetch("/api/user/profile");
    userData.value = await response.json();
  } finally {
    isLoading.value = false;
  }
});

響應式狀態的變更觀測：onBeforeUpdate 與 onUpdated

當元件內部的響應式資料被修改時，Vue 會準備重新繪製畫面。這兩個鉤子可以讓您精準捕捉畫面重繪前與重繪後的瞬間

const counter = ref(0);

onBeforeUpdate(() => {
  console.log("資料已變更，但畫面（DOM）尚未重新渲染");
});

onUpdated(() => {
  console.log("畫面已完成重繪！目前的實體 DOM 已反映最新數據");
});

防止記憶體外洩：onBeforeUnmount 與 onUnmounted

當網頁切換路由或關閉特定元件時，會觸發銷毀階段。如果我們在元件內建立了全域事件監聽（如 window.addEventListener）或定時器（setInterval），必須在此階段手動清除，否則會引發記憶體外洩（Memory Leak）。

let timer = null;

const handleResize = () => {
  console.log("視窗大小改變中：", window.innerWidth);
};

onMounted(() => {
  // 建立全域監聽與計時器
  window.addEventListener("resize", handleResize);
  timer = setInterval(() => {
    console.log("每秒執行一次的任務...");
  }, 1000);
});

// 元件即將銷毀前，確實做好打掃工作
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  clearInterval(timer);
  console.log("全域資源已釋放");
});