Vue 3 Composable 最佳實踐：從元件抽離到可複用邏輯

發表於 更新於 分類於

在 goCayin IoT 數位看板平台的開發過程中，面對大量複雜的元件邏輯——裝置狀態管理、地圖整合、表單驗證——這些邏輯如果堆在元件裡，很快就會變成難以維護的 fat component。

這篇分享我在實務中整理出來的 Composable 抽離策略。

什麼時候該抽 Composable？

當你的元件出現以下情況，就是抽離的時機：

  1. <script setup> 超過 100 行
  2. 同樣的邏輯在兩個以上的元件重複出現
  3. 邏輯跟 UI 渲染沒有直接關係（例如 API 呼叫、計算邏輯）

基本結構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// composables/useDeviceStatus.js
import { ref, computed, onMounted } from 'vue'
import { fetchDeviceList } from '@/api/device'

export function useDeviceStatus() {
  const devices = ref([])
  const isLoading = ref(false)

  const onlineCount = computed(
    () => devices.value.filter(d => d.status === 'online').length
  )

  async function loadDevices() {
    isLoading.value = true
    devices.value = await fetchDeviceList()
    isLoading.value = false
  }

  onMounted(loadDevices)

  return { devices, isLoading, onlineCount, loadDevices }
}

命名規範

Composable 統一用 use 開頭，放在 composables/ 資料夾：

1
2
3
4
composables/
├── useDeviceStatus.js
├── useMapIntegration.js
└── useFormValidation.js

小結

Composable 不是萬靈丹，過度抽離反而讓程式碼難追蹤。原則是：邏輯有複用需求，或是讓元件更易讀，再抽。