Options API vs Composition API

何時該使用哪一種？

Options API（Vue 2 傳統寫法）

說明

Options API 是 Vue 2 主要的寫作方式，透過 data、methods、computed、watch 等選項來組織元件邏輯。

優點

• ✅ 結構明確：適合簡單應用與初學者，閱讀與撰寫較直覺。
• ✅ 易於學習：邏輯分區明確，進入門檻低。
• ✅ 自動綁定 this：可直接透過 this 存取 data、methods、computed 中的屬性與方法。

缺點

• ❌ 邏輯分散：功能相關的邏輯拆分於不同區塊，維護大型專案較為困難。
• ❌ 共用邏輯困難：需透過 mixins 實現邏輯重用，但易造成命名衝突與可讀性降低。
• ❌ TypeScript 支援不佳：使用 this 存取屬性會影響型別推斷。

範例

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

Composition API（Vue 3 推薦寫法）

說明

範例

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

補充建議

• 若專案以 TypeScript 為主，建議直接使用 Composition API。
• 若開發的是單頁或簡單元件，Options API 可快速完成。
• 若有多人協作需求，使用 Composition API 搭配 composables 能有效減少程式碼重複與維護成本。
• 若從 Vue 2 升級 Vue 3，Options API 是平滑過渡的好選擇，但可逐步混用 Composition API 以便未來轉型。

官方文件參考

• Options API: https://vuejs.org/guide/introduction.html#api-styles
• Composition API: https://vuejs.org/guide/introduction.html#composition-api