一、Vue 組合式API

Vue 組合式API是Vue 3.0中引入的新特性，與之前的Vue選項(xiàng)式API有所不同。組合式API讓我們可以根據(jù)邏輯而不是按照選項(xiàng)來組織單文件組件。因此，這個(gè)新特性使得我們能夠更好地封裝和重用組件邏輯。Vue 組合式API也讓我們能夠在不同的組件之間輕松共享代碼。

在Vue 組合式API中，每個(gè)組件都可以包含一個(gè)或多個(gè)組合函數(shù)。組合函數(shù)是普通的JavaScript函數(shù)，但可以使用Vue提供的特殊函數(shù)和響應(yīng)性系統(tǒng)。每個(gè)組合函數(shù)可以返回對(duì)象，該對(duì)象包含數(shù)據(jù)屬性、計(jì)算屬性、方法等等，這些都可以在模板中使用。同時(shí)，Vue 組合式API還支持生命周期鉤子和響應(yīng)式函數(shù)的使用。

在官方文檔中對(duì)組合式API的講述也是十分到位，有興趣的可以看一下：組合式 API 常見問答 | Vue.js (vuejs.org)

二、Vue 組合式API的原理

組合式 API 包含了兩個(gè)部分：組合式函數(shù)和響應(yīng)式系統(tǒng)。組合式函數(shù)是一種特殊的函數(shù)，它接收一個(gè)上下文對(duì)象作為參數(shù)，并通過該對(duì)象來訪問組件的狀態(tài)和方法。響應(yīng)式系統(tǒng)是 Vue 3 中引入的新的數(shù)據(jù)響應(yīng)機(jī)制，它可以實(shí)現(xiàn)對(duì)數(shù)據(jù)的自動(dòng)監(jiān)聽、變更檢測和更新視圖等功能。

在 Vue 2 中，我們通常使用 Mixin 來實(shí)現(xiàn)代碼復(fù)用。但 Mixin 有其自身的缺點(diǎn)，例如命名沖突、生命周期鉤子混亂等問題。為了解決這些問題，Vue 3 引入了組合式函數(shù)的概念。組合式函數(shù)實(shí)際上就是一種特殊的函數(shù)，它接收一個(gè)上下文對(duì)象作為參數(shù)，通過該對(duì)象可以訪問組件的狀態(tài)和方法。

Vue 組合式API的原理主要是通過兩個(gè)API： setup() 和 reactive() 實(shí)現(xiàn)的。

1. setup()

在 Vue 組合式API 中，每個(gè)組件都必須包含一個(gè) setup() 函數(shù)。這個(gè)函數(shù)是在組件初始化期間調(diào)用的，其目的是為組件創(chuàng)建并設(shè)置響應(yīng)式狀態(tài)，并返回需要在模板中使用的數(shù)據(jù)和方法。 setup() 函數(shù)只在組件實(shí)例化時(shí)執(zhí)行一次，并返回一個(gè)對(duì)象。

import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      message: 'Hello World'
    });
    return {
      state
    }
  }
}

在上面的代碼中，我們使用了Vue提供的 reactive() 函數(shù)來創(chuàng)建一個(gè)響應(yīng)式對(duì)象。在 setup() 函數(shù)中，我們將 message 屬性保存在 state 對(duì)象中，并將其返回到模板中使用。

2. reactive()

Vue 3.0 中的 reactive() 函數(shù)是用于創(chuàng)建響應(yīng)式數(shù)據(jù)的。響應(yīng)式數(shù)據(jù)意味著當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，會(huì)自動(dòng)觸發(fā)組件重新渲染。在組合式API中使用響應(yīng)式數(shù)據(jù)非常簡單，只需要使用 reactive() 函數(shù)來創(chuàng)建對(duì)象即可。

import { reactive } from 'vue';
const state = reactive({
  count: 0
});
state.count++; // 觸發(fā)組件重新渲染

三、使用 Vue 組合式API

現(xiàn)在告訴你如何在Vue組件中使用組合式API。下面是一個(gè)簡單的例子：

1. 創(chuàng)建組合式函數(shù)

學(xué)習(xí)了官方文檔后，你可以簡單地編寫一個(gè)普通的 JavaScript 函數(shù)，然后將它返回給 setup() 函數(shù)。這個(gè)函數(shù)可以使用 Vue 提供的特殊函數(shù)和響應(yīng)性系統(tǒng)。同時(shí)，組合式函數(shù)也可以返回一個(gè)對(duì)象，該對(duì)象包含數(shù)據(jù)屬性、計(jì)算屬性、方法等等，這些都可以在模板中使用。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>
<script>
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      message: 'Hello World'
    });
    const reverseMessage = () => {
      state.message = state.message.split('').reverse().join('');
    };
    return {
      ...state,
      reverseMessage
    };
  }
}
</script>

在上面的代碼中，我們首先導(dǎo)入了 reactive() 函數(shù)，然后在 setup() 函數(shù)中使用它創(chuàng)建了一個(gè)響應(yīng)式對(duì)象 state。在這個(gè)例子中，我們只有一個(gè)屬性 message，初始值為 Hello World。我們還在 setup() 函數(shù)中聲明了一個(gè) reverseMessage 函數(shù)，該函數(shù)通過將 message 屬性反轉(zhuǎn)來改變消息文本。

最后，我們從 setup() 函數(shù)中返回了一個(gè)包含 state 和 reverseMessage 的對(duì)象。在模板中，我們使用了插值語法顯示了 message 屬性，并在按鈕上綁定了 reverseMessage 方法。

2. 訪問全局狀態(tài)

在 Vue 2 中，我們通常使用 Vuex 來管理全局狀態(tài)。但是 Vuex 也有其自身的缺點(diǎn)，例如使用復(fù)雜、代碼冗余等問題。為了解決這些問題，Vue 3 引入了一個(gè)新的 API：provide / inject。使用 provide / inject 可以輕松地實(shí)現(xiàn)全局狀態(tài)的共享和傳遞。

下面是一個(gè)簡單的使用 provide / inject 訪問全局狀態(tài)的示例：

import { reactive, provide, inject } from 'vue'
const AppSymbol = Symbol()
export function createAppState() {
  const state = reactive({
    count: 0
  })
  provide(AppSymbol, state)
}
export function useAppState() {
  const appState = inject(AppSymbol)
  if (!appState) {
    throw new Error('App state not found')
  }
  return appState
}

這段代碼使用 provide / inject 實(shí)現(xiàn)了一個(gè)全局狀態(tài)的共享。createAppState 函數(shù)用來創(chuàng)建全局狀態(tài)，而 useAppState 函數(shù)則用來訪問全局狀態(tài)。在組件中使用 useAppState 函數(shù)即可訪問全局狀態(tài)。注意，provide 和 inject 必須使用相同的 Symbol 作為鍵值，以便在不同的文件中進(jìn)行傳遞。

3. 處理生命周期

在 Vue 2 中，我們通常使用生命周期鉤子函數(shù)來處理各種生命周期事件。但是生命周期鉤子函數(shù)過于繁瑣，容易出現(xiàn)潛在的問題。為了解決這些問題，Vue 3 引入了一種新的生命周期處理方式：onXxx 生命周期鉤子。

下面是一個(gè)簡單的使用 onXxx 生命周期鉤子的demo：

import { onMounted } from 'vue'
export function useHello() {
  onMounted(() => {
    console.log('Hello world')
  })
}

使用 onMounted 生命周期鉤子來實(shí)現(xiàn)在組件掛載后輸出 "Hello world" 的效果。onMounted 函數(shù)接收一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)將會(huì)在組件掛載后執(zhí)行。通過使用 onXxx 生命周期鉤子，我們可以更為靈活地處理各種生命周期事件。

四、組合式 API 和選項(xiàng)式 API 的區(qū)別

上面我們已經(jīng)介紹了選項(xiàng)式 API 和組合式 API 的基本概念和使用方法。那么，這兩種 API 之間到底有哪些區(qū)別呢？下面是一些常見的區(qū)別：

組合式 API 和選項(xiàng)式 API 的背后原理是相似的。它們都依賴于 Vue.js 內(nèi)部實(shí)現(xiàn)的響應(yīng)式系統(tǒng)。

在 Vue.js 的響應(yīng)式系統(tǒng)中，Vue.js 使用了 Object.defineProperty 或 Proxy 對(duì)象對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue.js 就會(huì)根據(jù)依賴關(guān)系重新計(jì)算視圖，并更新頁面。

而在組合式 API 中，Vue.js 將響應(yīng)式系統(tǒng)的底層實(shí)現(xiàn)封裝成了一些函數(shù)，開發(fā)者可以通過這些函數(shù)來訪問和操作響應(yīng)式數(shù)據(jù)。

例如，在組合式 API 中，使用 reactive 函數(shù)來創(chuàng)建一個(gè)響應(yīng)式對(duì)象。使用 ref 函數(shù)來將一個(gè)普通的數(shù)據(jù)轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)，使用 computed 函數(shù)來定義一個(gè)計(jì)算屬性。

下面簡單列舉一下差異，讓大家明白~

1. API 形式不同

選項(xiàng)式 API 是基于對(duì)象的形式，將所有的方法、數(shù)據(jù)、計(jì)算屬性等放置在一個(gè)對(duì)象中。

組合式 API 通過函數(shù)的方式組合邏輯代碼，可以更容易地實(shí)現(xiàn)組件邏輯的復(fù)用以及組合。

2. 響應(yīng)式處理不同

在 Vue.js 2.x 中，選項(xiàng)式 API 使用 Object.defineProperty 來實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式處理。

Vue.js 3.x 引入了 Proxy 對(duì)象來實(shí)現(xiàn)響應(yīng)式處理。

3. 生命周期鉤子不同

在選項(xiàng)式 API 中，生命周期鉤子分為兩種：beforeCreate 和 created。

在組合式 API 中，生命周期鉤子是通過函數(shù)的方式來定義的，例如：onBeforeMount、onMounted 等。

4. 計(jì)算屬性不同

在選項(xiàng)式 API 中，使用 computed 屬性來定義計(jì)算屬性。

在組合式 API 中，使用 computed 函數(shù)來定義計(jì)算屬性。

5. 更小的生產(chǎn)包體積

搭配 <script setup> 使用組合式 API 比等價(jià)情況下的選項(xiàng)式 API 更高效，對(duì)代碼壓縮也更友好。這是由于 <script setup> 形式書寫的組件模板被編譯為了一個(gè)內(nèi)聯(lián)函數(shù)，和 <script setup> 中的代碼位于同一作用域。不像選項(xiàng)式 API 需要依賴 this 上下文對(duì)象訪問屬性，被編譯的模板可以直接訪問 <script setup> 中定義的變量，無需從實(shí)例中代理。這對(duì)代碼壓縮更友好，因?yàn)楸镜刈兞康拿挚梢员粔嚎s，但對(duì)象的屬性名則不能。

6. 更好的邏輯復(fù)用

組合式 API 最基本的優(yōu)勢(shì)是它使我們能夠通過組合函數(shù)來實(shí)現(xiàn)更加簡潔高效的邏輯復(fù)用。在選項(xiàng)式 API 中我們主要的邏輯復(fù)用機(jī)制是 mixins，而組合式 API 解決了mixins 的所有缺陷。

從設(shè)計(jì)者的角度來看，Vue 組合式API和選項(xiàng)式API的區(qū)別主要在于它們組織代碼的方式和側(cè)重點(diǎn)。

（1）代碼組織方式

• 選項(xiàng)式API: 將不同功能的代碼分散在不同的選項(xiàng)中，如 data、computed、methods、watch、created、mounted 等等。這種方式使得代碼結(jié)構(gòu)比較松散，并且難以重用邏輯代碼。

• 組合式API: 將不同功能的代碼統(tǒng)一放在一個(gè)組合函數(shù)中。這種方式使得邏輯代碼可以更好地封裝和重用，同時(shí)也使得代碼更加結(jié)構(gòu)化和可讀性更強(qiáng)。

（2）側(cè)重點(diǎn)

• 選項(xiàng)式API: 強(qiáng)調(diào)的是聲明式編程，即通過描述組件的屬性和方法來定義其行為。這樣的做法使得組件的結(jié)構(gòu)和行為都比較清晰明了，但是對(duì)于一些復(fù)雜邏輯的組件來說，代碼可能會(huì)比較分散，難以重用。

• 組合式API: 強(qiáng)調(diào)的是命令式編程，即通過編寫函數(shù)來定義組件的行為。這種方式使得邏輯代碼更加集中，易于重用，但同時(shí)也可能使得組件結(jié)構(gòu)不夠清晰，有時(shí)候需要適當(dāng)?shù)某橄蠛头庋b。

五、Vue 組合式API的優(yōu)勢(shì)

Vue 組合式API帶來了許多優(yōu)點(diǎn)，讓我們一起來看看：

• 更好的組件復(fù)用 使用選項(xiàng)式API時(shí)，我們需要將代碼分散在組件選項(xiàng)中。但在組合式API中，我們可以將代碼封裝在單獨(dú)的組合函數(shù)中，然后在不同的組件之間進(jìn)行重用。

• 更容易測試 在選項(xiàng)式API中，我們需要模擬Vue實(shí)例和其生命周期鉤子以進(jìn)行測試。但在組合式API中，我們可以更輕松地測試組件邏輯，而無需實(shí)際創(chuàng)建Vue實(shí)例。

• 更好的類型安全 使用選項(xiàng)式API時(shí)，我們需要手動(dòng)添加類型注釋以獲得類型安全。但在組合式API中，由于其是基于JavaScript函數(shù)的，因此能夠提供更強(qiáng)大的類型推斷和類型安全。

六、小結(jié)一下

Vue 組合式API是Vue 3.0 中的一個(gè)強(qiáng)大而靈活的特性。它使得我們能夠更好地封裝和重用組件邏輯，并共享代碼。同時(shí)，使用Vue 組合式API還能提供更好的類型安全和測試性。在實(shí)際開發(fā)中，我們應(yīng)該盡可能地使用Vue 組合式API，以提高開發(fā)效率和代碼可維護(hù)性。

但是？ 選項(xiàng)式 API 會(huì)被廢棄嗎？

不會(huì)，官方回答：我們沒有任何計(jì)劃這樣做。選項(xiàng)式 API 也是 Vue 不可分割的一部分，也有很多開發(fā)者喜歡它。我們也意識(shí)到組合式 API 更適用于大型的項(xiàng)目，而對(duì)于中小型項(xiàng)目來說選項(xiàng)式 API 仍然是一個(gè)不錯(cuò)的選擇。

??‍??‍??‍?? 其實(shí)吧，選項(xiàng)式API適合那些結(jié)構(gòu)比較簡單且行為比較明確的組件，而組合式API則更適合那些擁有復(fù)雜邏輯，需要更好的代碼結(jié)構(gòu)和重用性的組件。當(dāng)然，在實(shí)際開發(fā)中，我們也可以根據(jù)具體情況靈活選擇這兩種API，或者將它們結(jié)合使用，以便更好地滿足項(xiàng)目需求。

以上就是Vue組合式API的特點(diǎn)及使用方法的詳細(xì)內(nèi)容，更多關(guān)于Vue組合式API的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論