自學前端不用怕：從零開始的三大關鍵文章圖片
  • 前端開發x
  • 職涯成長
  • 最新文章

自學前端不用怕：從零開始的三大關鍵

前言

Vue 3 的 Composition API 打破了傳統 Options API 的侷限，讓你能在 setup() 裡自由組合反應式邏輯與生命週期。對於剛從 Vue 2 或其他框架轉換的新手來說，可能一開始會被 ref、reactive、watchEffect 等概念搞得頭昏腦脹。本文將用「三大關鍵」示範，幫助你快速上手 Composition API，寫出更模組化、易維護的程式碼。

前言圖片

三大關鍵快速掌握 Composition API

關鍵一：理解 setup() 與反應式 API

為何重要
setup() 是所有 Composition API 的起點，定義在此的 ref、reactive、computed 都能享受 Vue 的反應式追蹤。

建議做法

  1. 在元件中使用 ref 管理單一原始值：
    import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return { count };
  },
};
  2. 用 reactive 包成物件狀態
  3. 熟悉 computed 衍生狀態

關鍵二：善用 watchEffect 與 watch

為何重要
監聽狀態改變、處理副作用時，watchEffect 讓你無須指定依賴，watch 可精確控制何時執行。

建議做法

  • watchEffect：自動追蹤所有用到的 ref，適合簡單場景：
watchEffect(() => {
  console.log(state.items.length);
});
  • watch：監聽特定來源，並處理新舊值：
watch(
  () => props.id,
  (newId, oldId) => {
    fetchItem(newId);
  },
);

結語

掌握 setup() 中的反應式 API、打造通用 Composable，並善用 watchEffect／watch，你就能快速上手 Vue 3 Composition API，寫出更結構化、易維護的元件。立即在專案中實作這三大關鍵，享受 Composition API 帶來的開發魅力！