Day 43: Composable 函數基礎與抽取簡單邏輯 (~3 小時)

• 本日目標: 理解 Composable 函數的概念、優勢，并學會如何將簡單的、無狀態的邏輯抽取為 Composable。
• 所需資源: Vue 3 官方文檔 (組合式函數): https://cn.vuejs.org/guide/reusability/composables.html

學習計劃:

• 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

  • 內容: Composable 函數的引入與優勢。
  • 活動: 閱讀官方文檔中關于“組合式函數”的介紹。理解 Composable 函數是為了解決在 Composition API 中復用帶狀態邏輯的問題。對比它與 Mixin、Renderless Components 等傳統復用方式的優缺點。
  • 思考: Composable 如何提升代碼組織性、可讀性以及類型推斷能力？
  • 休息: 短暫休息。

• 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

  • 內容: Composable 函數的基本結構。
  • 活動: 學習 Composable 函數的約定：通常以 use 開頭命名（如 useMouse），是普通的 JavaScript 函數，接受參數并返回狀態和方法。
  • 實踐: 在你的 Vue 項目中創建一個 src/composables 目錄。在其中創建一個 useCounter.js 文件，定義一個簡單的函數，不包含任何響應式狀態，例如 export function useGreeting(name) { return Hello, ${name}; }。
  • 休息: 快速調整狀態。

• 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

  • 內容: 在組件中使用 Composable 函數。
  • 活動: 學習如何在組件的 <script setup> 中導入并調用 Composable 函數。
  • 實踐: 在你的 App.vue 或其他組件中，導入并調用 useGreeting。在模板中顯示其返回值。
  • 休息: 短暫放松。

• 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

  • 內容: 抽取簡單的帶狀態邏輯 (以 ref 為例)。
  • 活動: 閱讀官方文檔中關于“約定與最佳實踐”的部分，特別是關于在 Composable 中使用響應式 API 的部分。理解 Composable 的核心是能夠封裝響應式狀態。
  • 實踐: 修改 useCounter.js，使其包含響應式狀態。例如：export function useCounter(initialValue = 0) { const count = ref(initialValue); const increment = () => count.value++; return { count, increment }; }
  • 休息: 補充水分。

• 總結與回顧 (10-15 分鐘):

  • 回顧 Composable 函數的基本概念和 use 命名約定。
  • 確認你理解了 Composable 函數如何封裝并導出響應式狀態。
  • 確保你在組件中成功使用了包含響應式狀態的 Composable。

---

Day 44: Composable 函數 - 生命周期與偵聽器集成 (~3 小時)

• 本日目標: 學習如何在 Composable 函數中集成生命周期鉤子和偵聽器，以封裝更復雜的帶狀態邏輯。
• 所需資源: Vue 3 官方文檔 (組合式函數): https://cn.vuejs.org/guide/reusability/composables.html

學習計劃:

• 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

  • 內容: Composable 中使用生命周期鉤子。
  • 活動: 理解 Composable 函數可以在 setup 期間被調用，因此可以在 Composable 內部直接使用 onMounted, onUnmounted 等生命周期鉤子。這些鉤子會注冊到調用該 Composable 的組件實例上。
  • 實踐: 修改 useCounter.js (或創建一個新的 useLogger.js)，在其中添加 onMounted(() => console.log('Composable mounted')) 和 onUnmounted(() => console.log('Composable unmounted'))。
  • 休息: 短暫休息。

• 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

  • 內容: 結合生命周期鉤子實現實際功能。
  • 活動: 思考一個常見的場景：鼠標位置追蹤。它需要 onMounted 來添加事件監聽器，并在 onUnmounted 中移除事件監聽器以防止內存泄漏。
  • 實踐: 創建 useMouse.js：

    import { ref, onMounted, onUnmounted } from 'vue';
    export function useMouse() {const x = ref(0);const y = ref(0);function update(event) {x.value = event.pageX;y.value = event.pageY;}onMounted(() => window.addEventListener('mousemove', update));onUnmounted(() => window.removeEventListener('mousemove', update));return { x, y };
    }
    

  • 休息: 快速調整狀態。

• 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

  • 內容: 在 Composable 中使用偵聽器 (watch, watchEffect)。
  • 活動: 理解 Composable 函數也可以包含 watch 和 watchEffect 來偵聽其內部或外部傳入的響應式狀態變化。這使得 Composable 能夠封裝帶有副作用的邏輯。
  • 實踐: 在 useMouse.js 中添加一個 watchEffect(() => { console.log(Mouse position: ${x.value}, ${y.value}); }); 觀察其效果。
  • 休息: 短暫放松。

• 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

  • 內容: 封裝異步數據獲取邏輯。
  • 活動: 這是一個非常常見的 Composable 應用場景。結合 ref (用于數據、加載狀態、錯誤) 和 onMounted (用于觸發請求)。
  • 實踐: 創建 useFetch.js：

    import { ref, onMounted } from 'vue';
    export function useFetch(url) {const data = ref(null);const error = ref(null);const loading = ref(true);onMounted(async () => {try {const res = await fetch(url);data.value = await res.json();} catch (err) {error.value = err;} finally {loading.value = false;}});return { data, error, loading };
    }
    

  • 休息: 補充能量。

• 總結與回顧 (10-15 分鐘):

  • 回顧如何在 Composable 中使用生命周期鉤子 (onMounted, onUnmounted) 和偵聽器 (watch, watchEffect)。
  • 鞏固如何通過 Composable 封裝帶有副作用的邏輯，例如事件監聽和數據獲取。
  • 確保 useMouse 和 useFetch Composable 能夠在組件中正常工作。

---

Day 45: Composable 函數 - 高級用法與最佳實踐 (~3 小時)

• 本日目標: 掌握 Composable 的高級用法，如接受參數、處理響應式參數，并理解使用 Composable 的最佳實踐。
• 所需資源: Vue 3 官方文檔 (組合式函數): https://cn.vuejs.org/guide/reusability/composables.html

學習計劃:

• 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

  • 內容: Composable 接受參數。
  • 活動: 理解 Composable 作為普通 JavaScript 函數，可以接受任意數量和類型的參數。這使得它們更具通用性。
  • 實踐: 修改 useFetch.js，使其接受一個 options 對象作為第二個參數，用于配置 Workspace 請求（例如 method, headers, body）。
  • 休息: 短暫休息。

• 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

  • 內容: 處理 Composable 的響應式參數。
  • 活動: 學習如何處理傳入 Composable 的響應式參數。如果傳入的參數是響應式的（ref 或 reactive），并且 Composable 內部的邏輯需要響應這些參數的變化，就需要使用 watch 或 toRefs 來響應。
  • 實踐: 修改 useFetch.js，使其 url 參數也變為響應式的。例如，useFetch(url: Ref<string>)，并在內部使用 watch(url, fetchData) 來在 url 變化時重新發起請求。
  • 休息: 快速調整狀態。

• 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

  • 內容: Composables 之間的組合。
  • 活動: 理解 Composable 函數之間可以互相調用和組合，形成更復雜的邏輯。這大大提高了代碼的模塊化和可維護性。
  • 實踐: 創建一個 usePaginatedFetch.js，它內部調用 useFetch，并添加分頁相關的邏輯（如 currentPage，itemsPerPage，paginatedData）。
  • 休息: 短暫放松。

• 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

  • 內容: Composable 的最佳實踐與命名約定。
  • 活動: 回顧官方文檔中關于 Composable 最佳實踐的部分：use 命名約定、返回一個對象（而不是數組）、避免在 Composable 內部執行 DOM 操作（除非封裝了通用行為）、注意副作用的清理。
  • 思考: 為什么 Composable 內部的 DOM 操作應謹慎？為什么推薦返回一個對象？
  • 休息: 補充能量。

• 總結與實踐 (10-15 分鐘):

  • 回顧 Composable 函數接受響應式參數并進行響應的方法。
  • 鞏固 Composable 之間相互組合的能力。
  • 討論 Composable 的最佳實踐，確保你的代碼符合規范。
  • 嘗試將你項目中的某個復雜組件中的一部分邏輯抽取為 Composable。

---

掌握檢查:

• 在 Day 45 結束時，你應該能夠：
  • 清晰理解 Composable 函數的定義、優勢和 use 命名約定。
  • 能夠將簡單的響應式狀態和邏輯（如計數器）封裝成 Composable。
  • 能夠在 Composable 中使用 onMounted, onUnmounted 等生命周期鉤子來管理副作用。
  • 能夠在 Composable 中使用 watch 或 watchEffect 來響應內部或外部的響應式數據變化。
  • 能夠封裝異步數據獲取等帶有復雜副作用的邏輯。
  • 理解 Composable 如何接受參數，并能處理響應式參數。
  • 理解 Composable 之間如何相互組合以構建更復雜的邏輯。
  • 了解 Composable 的最佳實踐，如返回對象、副作用清理等。