Vue 3 中的組合式 API 和選項式 API

一、什麼是組合式 API 和選項式 API

Vue 3 中提供了兩種 API：組合式 API 和選項式 API。

組合式 API 是一種新的方式來編寫組件。這種 API 將所有的功能按照功能類別進行分類，然後提供一組函數來支持這些功能。開發者可以自由地組合和重用這些函數，從而構建具有複雜邏輯的組件。

選項式 API 則是 Vue 2 中已有的方式。開發者可以通過選項對象來定義一個組件，其中包括數據、計算屬性、方法等等。

二、組合式 API vs 選項式 API

組合式 API 和選項式 API 有什麼不同呢？

1. 組合式 API 的優點

組合式 API 的主要優點在於它更加靈活，更易於編寫複雜的組件。開發者可以根據需要組合和重用不同的函數，從而構建出具有複雜邏輯的組件。

此外，組合式 API 還能夠更好地支持類型推導和編輯器自動補全功能，從而提高開發效率。

2. 選項式 API 的優點

選項式 API 則在一些簡單的場景下更為方便，例如編寫一些簡單的組件。相較於組合式 API，選項式 API 更加易於理解和上手，而且使用起來也更為直觀。

三、組合式 API 例子

以下代碼演示了如何利用組合式 API 編寫一個計數器組件：

    
    <template>
      <div>
        <button @click="increment">+</button>
        <span>{{ count }}</span>
        <button @click="decrement">-</button>
      </div>
    </template>

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

    export default {
      setup() {
        const state = reactive({
          count: 0,
        });

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

        const decrement = () => {
          state.count--;
        };

        const doubleCount = computed(() => state.count * 2);

        return {
          count: state.count,
          increment,
          decrement,
          doubleCount,
        };
      },
    };
    </script>
    

四、選項式 API 例子

以下代碼演示了如何利用選項式 API 編寫一個計數器組件：

    
    <template>
      <div>
        <button @click="increment">+</button>
        <span>{{ count }}</span>
        <button @click="decrement">-</button>
        <span>{{ doubleCount }}</span>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          count: 0,
        };
      },
      computed: {
        doubleCount() {
          return this.count * 2;
        },
      },
      methods: {
        increment() {
          this.count++;
        },
        decrement() {
          this.count--;
        },
      },
    };
    </script>
    

五、結語

以上就是 Vue 3 中的組合式 API 和選項式 API 的介紹和比較。每種 API 都有其適用的場景，開發者可以根據實際情況選擇合適的方式來編寫組件。