Vue 3 的組合式 API 為開(kāi)發(fā)者提供了一種全新的方式來(lái)組織和結(jié)構(gòu)化代碼，極大地提升了代碼的靈活性和可維護(hù)性。盡管 Vue 2 的選項(xiàng)式 API 仍然是許多開(kāi)發(fā)者的首選，但組合式 API 在可擴(kuò)展性和可重用性方面表現(xiàn)尤為出色。本文將深入探討組合式 API 的核心概念，并展示如何在 Vue 3 應(yīng)用程序中高效使用它。

什么是組合式 API？為什么你應(yīng)該嘗試它？

組合式 API 是 Vue 3 引入的一項(xiàng)新特性，它允許開(kāi)發(fā)者通過(guò)邏輯關(guān)注點(diǎn)而不是傳統(tǒng)的組件選項(xiàng)（如 data、methods 和 computed）來(lái)組織代碼。通過(guò)使用函數(shù)和響應(yīng)式原語(yǔ)，組合式 API 能夠更好地封裝和重用邏輯。以下是使用組合式 API 的主要優(yōu)勢(shì)：

1. 更好的代碼組織：邏輯按功能分組，而不是按選項(xiàng)分散。
2. 更高的可重用性：通過(guò)可組合函數(shù)，輕松提取和跨組件重用邏輯。
3. 更強(qiáng)的可擴(kuò)展性：簡(jiǎn)化大型組件的管理，減少代碼混亂。
4. TypeScript 友好：與 TypeScript 無(wú)縫集成，提升類型安全性。

組合式 API 特別適合大型項(xiàng)目、復(fù)雜邏輯的組件，以及希望提升代碼可重用性和可讀性的團(tuán)隊(duì)。

組合式 API 的核心概念

要充分利用組合式 API，你需要掌握以下幾個(gè)關(guān)鍵概念：

1. 響應(yīng)式狀態(tài)管理

ref 用于創(chuàng)建單個(gè)值的響應(yīng)式引用，通過(guò) .value 訪問(wèn)或修改該值。

import { ref } from 'vue';

const count = ref(0);

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

• ref 和 reactive 的區(qū)別在于，ref 更適合處理原始值，而 reactive 更適合處理對(duì)象 。
• Reactive vs Ref in Vue 3

2. 計(jì)算屬性

computed 用于基于其他響應(yīng)式值創(chuàng)建響應(yīng)式的派生數(shù)據(jù)。

import { ref, computed } from 'vue';

const count = ref(0);
const double = computed(() => count.value * 2);

3. 偵聽(tīng)器

watch 用于觀察響應(yīng)式值的變化，并在變化時(shí)執(zhí)行相應(yīng)的操作。

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

4. 生命周期鉤子

組合式 API 提供了與生命周期鉤子等效的函數(shù)。

import { onMounted, onUnmounted } from 'vue';

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

onUnmounted(() => {
  console.log('Component unmounted');
});

5. 可組合函數(shù)

可組合函數(shù)是組合式 API 的核心，它允許開(kāi)發(fā)者將邏輯封裝成可重用的函數(shù)。

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

export function useCounter() {
  const count = ref(0);

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

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

  return { count, increment, decrement };
}

使用可組合函數(shù)：

import { useCounter } from './useCounter';

const { count, increment, decrement } = useCounter();

• 可組合函數(shù)的最佳實(shí)踐和設(shè)計(jì)模式可以進(jìn)一步提升代碼的可維護(hù)性 。
• Vue Composable Best Practices

?? 深入學(xué)習(xí) Vue 組合式 API

如果你想更深入地學(xué)習(xí) Vue、Nuxt、JavaScript 或其他相關(guān)技術(shù)，可以訪問(wèn) VueSchool 獲取更多資源。

Vue School 鏈接

總結(jié)

Vue 3 的組合式 API 提供了一種現(xiàn)代且靈活的方式來(lái)管理狀態(tài)和邏輯，使你的應(yīng)用程序更易于擴(kuò)展和維護(hù)。通過(guò)掌握響應(yīng)式原語(yǔ)、計(jì)算屬性、偵聽(tīng)器和可組合函數(shù)，你可以編寫(xiě)出更干凈、更可重用的代碼。立即開(kāi)始嘗試組合式 API，釋放其全部潛力！

原文地址：https://dev.to/jacobandrewsky/understanding-the-vue-3-composition-api-fa2

作者：Jakub Andrzejewski