Vue 程式札記 : Option API 與 Composition API

Vue 提供了兩種不同的 API 來建立和管理組件：Option API 和 Composition API。本文將介紹這兩種 API 的特點和差異，並透過實際範例來理解它們的使用方式。

Option API

Option API 是 Vue 最初提供的 API，它以一個包含多個選項的物件來定義組件。這些選項包括 data、methods、computed、watch 等，用於定義組件的狀態、方法和計算屬性。

Vue.component('my-component', {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    // 計算屬性：計算 count 的兩倍值
    doubleCount() {
      return this.count * 2;
    }
  },
  watch: {
    // 監聽器：當 count 改變時，執行一些操作
    count(newValue, oldValue) {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

在這個範例中，我們使用 Option API 定義了一個組件，它有一個 count 數據和一個 increment 方法來增加 count 的值。然後通過計算屬性 doubleCount，我們可以獲得 count 的兩倍值。我們還使用 watch 來監聽 count 的變化，並在變化時執行一些操作。

Composition API

Composition API 是在 Vue 3 中引入的，是為了解決 Option API 會遇到的全局命名衝突、程式碼重用等問題。Composition API 使用一個 setup 函數來定義組件的響應式數據和邏輯。

import { ref, computed, watch, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    // 計算屬性：計算 count 的兩倍值
    const doubleCount= computed(() => count.value * 2);

    // 監聽器：當 count 改變時，更新 doubleCount
    watch(count, (newVal) => {
      doubleCount.value = newVal * 2;
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      doubleCount,
      increment
    };
  }
});

在這個範例中，我們使用 Composition API 定義了相同的組件，但是改用 ref 函數來創建響應式數據，並在 setup 函數中定義了方法和計算屬性。通過 watch 函數，我們可以監聽 count 的變化並執行一些操作。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡