Vue 3 Composable 完全指南：如何開發可重複使用的邏輯函數？

在開發 Vue 應用程式時，是否常遇到邏輯重複、元件過於肥大的問題？ Composable (組合式函數) 正是為了解決這些痛點而生。簡單來說，Composable 是將可重複使用的 狀態與行為 封裝成獨立的 function，讓程式碼更簡潔、更好維護。

什麼是 Composable？

Composable 是 Vue 3 Composition API 的核心應用。它利用 Vue 的響應式系統，例如：ref, reactive，將特定的功能邏輯抽離出元件。這不僅提高了程式碼的複用性，也讓單元測試變得更加容易。

常見的 Composable 使用情境

以下是開發中最常被封裝成 Composable 的功能模組：

Composable 名稱	功能用途說明
useFetch	封裝 API 請求邏輯、處理 Loading 與 Error 狀態
useAuth	管理使用者登入狀態、權限檢驗與 Token 存取
useMouse	追蹤滑鼠座標位置
useLocalStorage	簡化與瀏覽器 localStorage 的同步操作

Composable 的架構設計原則

為了確保專案的整潔與一致性，建議遵循以下開發規範：

命名與目錄規範

• 目錄命名：統一將邏輯函數放置於 src/composables/ 資料夾下。
• 函數命名： 檔案與函數名稱應以 use 作為開頭，並採用 小駝峰 (camelCase) 命名方式。

設計核心準則

• 不直接操作 DOM： Composable 應專注於數據與邏輯。若需與 DOM 互動，應透過 ref 綁定或在生命週期中執行，例如：onMounted()。
• 邏輯與 UI 分離： Composable 只負責「怎麼做」，而不負責「怎麼長」。
• 單一職責原則 (Single Responsibility)：每個 Composable 應專注於單一領域，將同一個領域的邏輯聚合在一起。例如: 取得多個使用者與單一使用者的資料就可以寫在一起。

專案結構範例

一個標準的 Vue 專案架構應如下所示：

src/
 ├─ composables/
 │   ├─ useFetch.js   # API 請求邏輯
 │   ├─ useMouse.js   # 滑鼠行為追蹤
 │   └─ useAuth.js    # 身分驗證管理
 ├─ App.vue
 └─ main.js

結語：為什麼您該開始使用 Composable？

透過 Composable，我們能將複雜的業務邏輯從 .vue 檔案中解放出來，實現真正的「高內聚、低耦合」。這不僅符合現代前端開發的趨勢，更是從 Vue 菜鳥晉升為資深開發者的必經之路。