Composable 與 Composition API

Composable 和 Composition API 是 Vue 3 引入的新特性，用來替代或補充傳統的 Options API。這些新特性提供了一種更靈活、更可重用的方式來管理組件邏輯，特別適合處理複雜的邏輯重用場景。

1. Composition API 簡介

Vue 3 中的 Composition API 是一組函數，這些函數主要在 setup 函數中使用。它提供了更好的邏輯組織方式，讓我們能夠將相關邏輯（例如狀態、響應式變數、方法、生命週期等）集中在一起，從而提高組件的可讀性和可維護性。

Composition API 的基本結構：

<template>
  <div>9</div>
  <button @click="increment">增加</button>
</template>

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

export default {
  setup() {
    const count = ref(0); // 定義響應式變數
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

在這個範例中：

• setup 是 Composition API 的核心函數，它在組件創建之前執行，用來初始化組件邏輯。
• ref 函數將 count 定義為一個響應式變數。
• 組件的狀態和邏輯都通過 setup 函數返回，並暴露給模板使用。

2. Composable 是什麼？

Composable 是一個將可重用邏輯封裝為函數的概念，類似於 Vue 2 的 Mixins。但與 Mixins 不同的是，Composable 不會自動合併到組件中，而是以更顯式的方式組織邏輯。這樣可以避免命名衝突，並且更清晰地看到邏輯的來源。

Composable 的範例：

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  return {
    count,
    increment,
  };
}

這個範例中的 useCounter 函數是一個典型的 Composable，它封裝了計數器的邏輯。

在組件中使用 Composable：

<template>
  <div>9</div>
  <button @click="increment">增加</button>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter(); // 使用 Composable
    return {
      count,
      increment,
    };
  },
};
</script>

在這裡，我們使用 useCounter Composable 將計數器邏輯重用到組件中。這樣的模式讓我們可以輕鬆地在不同組件中共享邏輯，並保持代碼的乾淨和可維護性。

3. Composition API 與 Options API 的比較

Options API (Vue 2 的方式)：

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

Composition API (Vue 3 新方式)：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};

對比：

• Options API 通過不同的選項（data、methods、computed 等）來定義組件的邏輯，邏輯分散在不同的區域中。
• Composition API 讓我們可以將相關邏輯集中在一起，這樣可以更靈活地組織代碼，特別是在處理複雜組件時非常有用。

4. Composition API 的核心功能

1. 響應式變數

• ref 和 reactive 是兩個核心函數，分別用來創建單個響應式值和響應式對象。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0); // 單個響應式變數
    const state = reactive({ count: 0, name: 'Vue' }); // 整個響應式對象

    return {
      count,
      state,
    };
  },
};

2. 計算屬性

• 使用 computed 創建基於其他狀態的響應式屬性。

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2); // 基於 count 的計算屬性

    return {
      count,
      doubleCount,
    };
  },
};

3. 生命週期鉤子

• Vue 3 中的生命週期鉤子可以在 setup 中使用，例如 onMounted。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    onMounted(() => {
      console.log('組件已經被掛載');
    });

    return {
      count,
    };
  },
};

5. 為什麼選擇 Composition API？

1. 更好的邏輯重用

• 與 Mixins 相比，Composition API 更加靈活且可組合，不會發生命名衝突。Composable 函數可以被不同的組件重用，並且邏輯更加清晰。

2. 代碼更具可讀性

• Composition API 將相關邏輯集中在一起，而不是像 Options API 那樣分散在不同的選項中，這對於處理大型和複雜組件特別有幫助。

3. 類型推斷支持

• Composition API 非常適合 TypeScript，因為它允許更精確的類型推斷，從而提高代碼的可靠性和可維護性。

---

總結

• Composition API 是 Vue 3 提供的一種更加靈活和結構化的方式來管理組件邏輯，適合大型或複雜應用。
• Composable 是將可重用邏輯封裝在函數中的概念，類似於 Vue 2 的 Mixins，但更清晰且避免了命名衝突。
• 通過 Composition API 和 Composable，開發者可以以更模塊化的方式組織代碼，使應用更加可維護且易於擴展。

這些新工具極大地提升了 Vue 3 開發的靈活性與可重用性。