Composition API 和 Options API 是 Vue.js 中兩種構建組件邏輯的方式，它們在組織和管理代碼上有所不同。Vue 2 引入了 Options API，Vue 3 則引入了 Composition API，提供了一種更靈活和可重用的方式來編寫組件。下面是它們的主要差異：

基本概念

• Options API：這是 Vue.js 的傳統方式，使用一個包含組件選項（如 data、methods、computed 等）的對象來組織邏輯和狀態。
• Composition API：在 Vue 3 中引入，這種方式使用函數的寫法，將組件邏輯進行更細的劃分。

語法差異

Options API
Options API 通過將狀態、計算屬性、方法等分別放置在不同的選項字段中，這種寫法較為直觀且容易理解。

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component is mounted')
  }
}

Composition API
Composition API 通過 setup() 函數來組織邏輯。在 setup() 中，我們可以使用 Vue 的 reactive、ref、computed、watch 等 Composition API 函數，將邏輯更靈活地組合在一起。

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    onMounted(() => {
      console.log('Component is mounted')
    })

    return { count, doubleCount, increment }
  }
}

組織邏輯的靈活性

• Options API：組件的邏輯被分成多個選項塊（如 data、methods、computed），這有助於快速定位某個功能或狀態，但如果一個組件邏輯複雜，這些分散的選項可能使得維護和閱讀變得困難。

• Composition API：將所有與某個功能相關的邏輯集中在一個地方（如 setup() 函數中），更容易分割和重用邏輯模塊。對於複雜的組件來說，Composition API 可以通過提取函數來使代碼更具可維護性和可測試性。

TypeScript 支持

• Options API：雖然可以與 TypeScript 結合使用，但支持並不那麼自然，需要較多的配置和手動類型聲明。

• Composition API：因為它基於函數和變量，與 TypeScript 的結合更為自然和簡單。例如，Composition API 中可以輕鬆地使用 TypeScript 進行類型推斷和類型檢查。

總結

• Options API 適合簡單、中小型應用，且更直觀易懂，對於初學者來說是一個很好的入門方式。
• Composition API 更靈活，特別適合大型應用和需要重用邏輯的場景，並且與 TypeScript 兼容性更好。

隨著 Vue 3 的發展，Composition API 成為了主流推薦的開發方式，但 Vue 團隊也承諾會繼續支持 Options API。