選項式API和組合式API

一、選項式API（Option API）

選項式API是Vue 2版本引入的一種API，使得組件可以接收一組選項（屬性或配置），並進行相應的響應式處理和運行時校驗。它是Vue 2版本最常用的API之一。

選項式API可以幫助我們在組件中定義數據、計算屬性、方法、生命周期鉤子等，並進行校驗和默認值的設置。在模板中使用這些選項的值可以幫助我們實現動態的數據展示。

在下面的示例中，我們可以看到如何使用選項式API在Vue組件中定義數據和計算屬性，並在模板中使用它們：

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <p>Double Counter: {{ doubleCounter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  computed: {
    doubleCounter() {
      return this.counter * 2
    }
  },
  methods: {
    increment() {
      this.counter++
    }
  }
}
</script>

在上面的示例中，我們使用了選項式API定義了一個名為“counter”的數據屬性、一個名為“doubleCounter”的計算屬性和一個名為“increment”的方法。在模板中，我們使用了這些選項的值展示了一個計數器和該計數器的兩倍。

二、組合式API（Composition API）

組合式API是Vue 3版本引入的一種API，它是選項式API的補充，使得組件的邏輯代碼可以更加清晰、模塊化和可重用。它提供了一組功能類似於React Hooks的API，可以讓我們把相關的邏輯狀態和行為組織在一起，並分割成更小的、可重用的部分。

下面是一個簡單的使用組合式API編寫的Vue組件示例：

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue'

function useCounter() {
  const state = reactive({
    count: 0
  })

  const increment = () => {
    state.count++
  }

  const doubleCount = computed(() => {
    return state.count * 2
  })

  return { state, increment, doubleCount }
}

export default {
  setup() {
    const { state, increment, doubleCount } = useCounter()

    return { counter: state.count, increment, doubleCounter: doubleCount }
  }
}
</script>

在上面的示例中，我們使用了組合式API編寫了一個名為“useCounter”的自定義鉤子，並在Vue組件中使用它。

在“useCounter”鉤子中，我們使用了“reactive”函數創建了一個響應式數據對象，定義了一個名為“increment”的方法，並使用了“computed”函數創建了一個計算屬性。

在Vue組件中，我們使用了“setup”函數引用了“useCounter”鉤子，並返回了一個對象，包含了“counter”、“increment”和“doubleCounter”這三個屬性，它們分別對應着“state.count”、“increment”和“doubleCount”。

三、選項式API和組合式API的異同

選項式API和組合式API都是Vue提供的API，但它們以不同的方式處理和組織組件的數據屬性、計算屬性、方法、生命周期鉤子等。

選項式API是Vue 2版本中使用的API，它是一種接收一組選項的方式，使得組件可以進行響應式處理和運行時校驗。它適用於小型組件或單文件組件，通過設置不同的選項可以定義組件的數據、計算屬性、方法、生命周期鉤子等。選項式API的使用比較簡單，可以很容易地在Vue組件中使用。

組合式API是Vue 3版本中引入的API，其設計靈感來自於React Hooks，它提供了一組功能類似的API，使得組件可以更加清晰、模塊化和可重用。它適用於中大型組件和複雜的業務場景，可以通過自定義鉤子將相關的邏輯狀態和行為組織在一起，並分割成更小的、可重用的部分。組合式API需要使用“setup”函數來引用自定義鉤子，並返回一個對象，包含了需要在組件中使用的屬性和方法。

選項式API和組合式API都是Vue的重要API，它們各有優點和適用場景，可以根據業務場景和項目需求選擇使用其中之一或兩者相結合。

四、總結

選項式API和組合式API都是Vue提供的API，用於組件的數據屬性、計算屬性、方法、生命周期鉤子等的定義和分配。它們各有特點和適用場景，可以根據項目需求和業務場景選擇使用。選項式API適用於小型組件或單文件組件，使用簡單；組合式API適用於中大型組件或複雜的業務場景，可以更好地組織和管理組件的相關邏輯狀態和行為。