組合式 API 介紹

組合式 API 是 Vue3 中引入的一種新的編程模式，它提供了一種更靈活、更高效的方式來組織和復用代碼。組合式 API 的主要目標是解決 Vue2 中選項式 API 在處理復雜組件時可能遇到的問題，如邏輯復用和代碼組織等。

Vue3 引入組合式 API 的原因在于，隨著應用程序的復雜性增加，我們可能會遇到需要在多個組件之間共享狀態(tài)邏輯的情況。在 Vue2 中，我們通常會使用 mixins 來實現(xiàn)這一點，但這可能會導致命名沖突和來源不明的問題。組合式 API 通過引入setup函數(shù)，使我們能夠更直觀地組織和復用代碼。

總得來說：組合式 API (Composition API) 是一系列 API 的集合，使我們可以使用函數(shù)而不是聲明選項的方式書寫 Vue 組件。它是一個概括性的術語，涵蓋了以下方面的 API：

• 響應式 API：例如 ref() 和 reactive()，使我們可以直接創(chuàng)建響應式狀態(tài)、計算屬性和偵聽器。

• 生命周期鉤子：例如 onMounted() 和 onUnmounted()，使我們可以在組件各個生命周期階段添加邏輯。

• 依賴注入：例如 provide() 和 inject()，使我們可以在使用響應式 API 時，利用 Vue 的依賴注入系統(tǒng)。

組合式 API 與選項式 API 對比

與傳統(tǒng)的選項式 API 相比，組合式 API 提供了更高的靈活性和可復用性。在選項式 API 中，我們需要按照data、methods、computed等選項來組織代碼，這在處理簡單組件時非常方便，但在處理復雜組件時，相關的邏輯可能會被分散在不同的選項中，使得代碼難以維護。

相反，組合式 API 允許我們按照邏輯關系來組織代碼，這使得代碼更易于理解和維護。此外，組合式 API 還提供了更好的類型推斷，使得我們能夠更好地利用 TypeScript 的優(yōu)勢。

Composition API 相比 Options API 具有以下優(yōu)勢：

• **更好的代碼組織：**Composition API 允許我們將邏輯相關的代碼組織在一起，使得代碼更加可讀、可維護。

• **更好的復用性：**通過自定義組合函數(shù)，我們可以將邏輯進行封裝，使其在不同組件之間進行復用。

• **更好的類型推斷：**Composition API 使用了 TypeScript 的方式來定義函數(shù)簽名，可以提供更好的類型推斷和編碼支持。

• **更小的生產(chǎn)包體積：**搭配 <script setup> 使用組合式 API 比等價情況下的選項式 API 更高效，對代碼壓縮也更友好。

• **更好的響應性：**Composition API 提供了更細粒度的響應性跟蹤，可以更好地控制組件的更新和渲染。

觀察下面兩張動圖，直觀的感受組合式 API 與選項式 API 的最大的區(qū)別；

組合式 API 使用舉例

讓我們通過一個簡單的例子來看看如何使用組合式 API。假設我們正在構(gòu)建一個計數(shù)器應用，我們可以使用ref函數(shù)來創(chuàng)建一個響應式的計數(shù)器：

在這個例子中，我們首先導入了ref函數(shù)，然后在setup函數(shù)中使用它來創(chuàng)建一個響應式的計數(shù)器。我們還定義了一個increment函數(shù)來增加計數(shù)器的值。最后，我們返回了count和increment，使得它們可以在模板中使用。

響應式數(shù)據(jù)

在 Vue 中，響應式數(shù)據(jù)是一種可以自動更新 UI 的數(shù)據(jù)。Vue3 提供了兩種創(chuàng)建響應式數(shù)據(jù)的方法：ref和reactive。

ref函數(shù)可以創(chuàng)建一個響應式的數(shù)據(jù)對象，這個對象有一個value屬性，我們可以通過這個屬性來獲取或設置它的值。reactive函數(shù)則可以創(chuàng)建一個響應式的對象，我們可以直接訪問或修改這個對象的屬性。

監(jiān)聽器和計算屬性

在 Vue 中，我們可以使用監(jiān)聽器來響應數(shù)據(jù)的變化。監(jiān)聽器是一種特殊的計算屬性，它會在依賴的數(shù)據(jù)變化時執(zhí)行一段代碼。我們可以使用watch函數(shù)來創(chuàng)建一個監(jiān)聽器。

計算屬性是一種基于其他數(shù)據(jù)自動計算的數(shù)據(jù)。我們可以使用computed函數(shù)來創(chuàng)建一個計算屬性。與監(jiān)聽器不同，計算屬性不會執(zhí)行任何副作用，它只是根據(jù)依賴的數(shù)據(jù)計算一個新的值。

自定義復用邏輯

組合式 API 提供了一種簡單的方式來自定義復用邏輯。我們可以將復雜的邏輯封裝成一個函數(shù)，然后在多個組件中復用這個函數(shù)。這個函數(shù)可以返回一些響應式的數(shù)據(jù)，方法，或者其他的組合函數(shù)。

如上一節(jié)中的 counter，我們定義成如下計算邏輯：

上面代碼定義了一個自定義復用邏輯useCounter，在 VUE 直接導入使用，代碼可讀性增強，邏輯更加聚合，代碼更易維護。

官方約定，自定義復用邏輯組合函數(shù)的命名都以 use 開頭。

生命周期鉤子函數(shù)

在 Vue3 中，生命周期鉤子函數(shù)的使用方式有所變化。我們可以在setup函數(shù)中直接使用它們，而不需要將它們放在created、mounted等選項中。這使得我們能夠更直觀地看到組件的生命周期。

主要有以下鉤子函數(shù)：

• onBeforeMount(): 在組件被掛載之前調(diào)用，此時組件已經(jīng)完成了響應式狀態(tài)的設置，但還沒有創(chuàng)建 DOM 節(jié)點。

• onMounted(): 在組件被掛載之后調(diào)用，此時組件已經(jīng)創(chuàng)建了 DOM 節(jié)點，并插入了父容器中?？梢栽谶@個鉤子中訪問或操作 DOM 元素。

• onBeforeUpdate(): 在組件即將因為響應式狀態(tài)變更而更新其 DOM 樹之前調(diào)用，可以在這個鉤子中訪問更新前的 DOM 狀態(tài)。

• onUpdated(): 在組件因為響應式狀態(tài)變更而更新其 DOM 樹之后調(diào)用，可以在這個鉤子中訪問更新后的 DOM 狀態(tài)。

• onBeforeUnmount(): 在組件實例被卸載之前調(diào)用，此時組件實例依然還保有全部的功能。

• onUnmounted(): 在組件實例被卸載之后調(diào)用，此時組件實例已經(jīng)失去了全部的功能?？梢栽谶@個鉤子中清理一些副作用，如計時器、事件監(jiān)聽器等。

• onErrorCaptured(): 在捕獲了后代組件傳遞的錯誤時調(diào)用，可以在這個鉤子中處理錯誤或阻止錯誤繼續(xù)向上傳遞。

• onRenderTracked(): 在組件渲染過程中追蹤到響應式依賴時調(diào)用，僅在開發(fā)模式下可用，用于調(diào)試響應式系統(tǒng)。

代碼示例：

其他

對于 Vue2 的用戶來說，遷移到 Vue3 可能需要一些時間來適應新的 API。但是，一旦你熟悉了組合式 API，你會發(fā)現(xiàn)它提供了一種更直觀、更靈活的方式來組織和復用代碼。

在 Vue3 中，響應式數(shù)據(jù)的實現(xiàn)原理是使用了 ES6 的 Proxy 和 Reflect。這使得 Vue3 能夠更精確地追蹤依賴，從而提高性能。

關于 OpenTiny

OpenTiny 是一套華為云出品的企業(yè)級組件庫解決方案，適配 PC 端 / 移動端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術棧，擁有主題配置系統(tǒng) / 中后臺模板 / CLI 命令行等效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應用。

核心亮點：

1. 跨端跨框架：使用 Renderless 無渲染組件設計架構(gòu)，實現(xiàn)了一套代碼同時支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級別的邏輯定制和全模板替換，靈活性好、二次開發(fā)能力強。

2. 組件豐富：PC 端有 80+組件，移動端有 30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動，保證大數(shù)據(jù)場景下的流暢體驗，除了業(yè)界常見組件之外，我們還提供了一些獨有的特色組件，如：Split 面板分割器、IpAddress IP 地址輸入框、Calendar 日歷、Crop 圖片裁切等

3. 配置式組件：組件支持模板式和配置式兩種使用方式，適合低代碼平臺，目前團隊已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺，針對低碼平臺做了大量優(yōu)化

4. 周邊生態(tài)齊全：提供了基于 Angular + TypeScript 的 TinyNG 組件庫，提供包含 10+ 實用功能、20+ 典型頁面的 TinyPro 中后臺模板，提供覆蓋前端開發(fā)全流程的 TinyCLI 工程化工具，提供強大的在線主題配置平臺 TinyTheme

聯(lián)系我們：

官方公眾號：OpenTiny

• OpenTiny 官網(wǎng)：opentiny.design/
  

• OpenTiny 代碼倉庫：github.com/opentiny/
  

• Vue 組件庫：github.com/opentiny/ti… （歡迎 Star）

• Angluar組件庫：github.com/opentiny/ng （歡迎 Star）

• CLI工具：github.com/opentiny/ti… （歡迎 Star）