摘要

我們可以將傳統選項式 API（Options API）中分散在 data、methods、computed、watch 等不同選項裡的相關邏輯，提取並整合到一個單一的、內聚的組合式函數中。

定義與說明

這個過程的核心是識別出與某個特定功能相關的所有程式碼片段。例如，一個計數器功能可能在 data 中有一個 count，在 methods 中有一個 increment 方法。我們可以將這兩者移動到一個 useCounter 組合式函數中，使用 ref 和一個普通函數來實現，從而讓邏輯更集中。

實作範例

選項式 API 轉組合式函數

舊的選項式 API 寫法：
export default {
  data() { return { count: 0 }; },
  computed: { double() { return this.count * 2; } },
  methods: { increment() { this.count++; } }
}

提取到組合式函數：
// composables/useCounter.js
import { ref, computed } from 'vue';
export function useCounter() {
  const count = ref(0);
  const double = computed(() => count.value * 2);
  function increment() { count.value++; }
  return { count, double, increment };
}

結論

將邏輯從選項式 API 提取到組合式函數，是重構現有 Vue 2/3 專案、提升程式碼可維護性和複用性的關鍵步驟。它讓原本分散的邏輯變得內聚和清晰。

選項式 API 邏輯提取重構