Vue.js，作為前端領域流行的框架之一，以其響應式數據綁定和組件化開發贏得了廣大開發者的喜愛。隨著前端技術的不斷發展和項目復雜度的增加，Vue 團隊推出了 Vue 3，并引入了 Composition API，以更好地滿足復雜應用的需求。
一、Composition API 是什么？
Composition API 是 Vue 3 中新增的一組 API，它允許開發者使用函數式編程的方式來組織和復用組件邏輯。與 Vue 2 中的 Options API（如?data、methods、computed?等選項）不同，Composition API 提供了一種更加靈活和可組合的方式來編寫組件邏輯。
二、為什么需要 Composition API？
-
更好的代碼組織：隨著組件功能的增加，Options API 可能會導致代碼難以維護和理解。Composition API 通過將邏輯拆分為多個可復用的函數，提高了代碼的可讀性和可維護性。
-
邏輯復用：在 Options API 中，復用邏輯通常需要通過 mixins 或高階組件實現，但這些方式可能導致命名沖突和關系不清晰。Composition API 中的函數可以像普通 JavaScript 函數一樣被復用，無需擔心命名沖突。
-
更好的 TypeScript 支持：Vue 3 與 TypeScript 的集成更加緊密，而 Composition API 的函數式編程風格更適合 TypeScript 的類型推斷和靜態檢查。
三、Composition API 的核心概念
-
reactive 和 ref：這兩個函數用于創建響應式數據。
reactive?用于創建響應式對象，而?ref?用于創建響應式引用。它們都是 Vue 3 的響應式系統的核心。reactive：返回一個響應式代理對象，該對象在被訪問或修改時會觸發相應的依賴更新。ref：返回一個響應式引用對象，其內部值可以通過?.value?屬性訪問或修改。
-
computed：用于創建計算屬性。計算屬性是基于響應式數據派生出的新數據，當依賴的數據變化時，計算屬性會自動更新。
-
watch 和 watchEffect：用于偵聽響應式數據的變化，并在數據變化時執行相應的回調函數。
watch：需要顯式指定偵聽的數據源和回調函數，支持立即執行、深度偵聽等選項。watchEffect：自動偵聽回調函數中使用的響應式數據，無需顯式指定數據源。當回調函數中使用的數據變化時，watchEffect?會自動重新執行回調函數。
-
setup 函數：Composition API 的入口函數，用于替代 Vue 2 中的?
data、methods、computed?等選項。在?setup?函數中，開發者可以定義和導出組件所需的響應式數據、計算屬性、方法等。
四、使用 Composition API 編寫組件
使用 Composition API 編寫組件時，通常需要在組件的?setup?函數中定義和導出所需的響應式數據、計算屬性和方法等。然后，在組件的模板中可以直接使用這些導出的值和方法。
以下是一個使用 Composition API 編寫的簡單 Vue 3 組件示例：
vue復制代碼
<template> | |
<div> | |
<p>{{ count }}</p> | |
<button @click="increment">Increment</button> | |
</div> | |
</template> | |
<script> | |
import { ref } from 'vue'; | |
export default { | |
setup() { | |
const count = ref(0); // 定義響應式引用 count，初始值為 0 | |
const increment = () => { // 定義方法 increment，用于增加 count 的值 | |
count.value++; // 修改響應式引用的值時，需要使用 .value 屬性 | |
}; | |
return { // 導出 count 和 increment，供模板中使用 | |
count, | |
increment | |
}; | |
} | |
}; | |
</script> |
五、總結與展望
Composition API 為 Vue 3 帶來了更加靈活和可組合的代碼組織方式，使得開發者能夠更好地應對復雜應用的挑戰。同時，Composition API 也為 Vue 與 TypeScript 的集成提供了更好的支持，有助于提升代碼的類型安全和可維護性。隨著 Vue 3 的不斷發展和完善，相信 Composition API 將在前端開發中發揮越來越重要的作用。
