Vue 3作為當前最熱門的前端框架之一，帶來了許多令人興奮的新特性。其中，Composition API的引入徹底改變了Vue組件的編寫方式，提供了更加靈活、可復用的代碼組織方案。本文將深入探討Composition API的核心概念和實踐，幫助開發者升級Vue 3開發技能，構建高可復用和可維護的前端應用。
一、Setup函數：組件邏輯的入口
在Vue 3中，Composition API的核心是Setup函數。它是一個新的組件選項，用于組織組件的邏輯。Setup函數在組件創建之前執行，可以用來定義組件的狀態、計算屬性、方法等。與傳統的Options API不同，Setup函數返回一個對象，包含了組件的所有暴露出去的屬性和方法。
下面是一個使用Setup函數的基本示例：
```javascript
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
onMounted(() => {
console.log('Component mounted.');
});
return {
count,
increment,
};
},
};
```
在這個示例中，我們使用`ref`函數定義了一個響應式的`count`變量，并定義了一個`increment`方法來修改`count`的值。同時，我們使用`onMounted`生命周期鉤子函數來執行組件掛載后的邏輯。最后，將`count`和`increment`通過返回對象的方式暴露給模板使用。
二、響應式系統：Ref和Reactive
Vue 3的響應式系統是基于Proxy實現的，提供了兩種創建響應式對象的方式：`ref`和`reactive`。
`ref`函數用于創建一個包裝基本類型值的響應式對象。當我們修改`ref`對象的`value`屬性時，關聯的模板會自動更新。例如：
```javascript
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1
```
`reactive`函數用于創建一個包裝對象類型值的響應式對象。當我們修改`reactive`對象的屬性時，關聯的模板也會自動更新。例如：
```javascript
import { reactive } from 'vue';
const state = reactive({
count: 0,
});
console.log(state.count); // 0
state.count++;
console.log(state.count); // 1
```
需要注意的是，`ref`對象在模板中使用時會自動解包，無需通過`.value`訪問；而`reactive`對象在模板中使用時，需要直接訪問其屬性。
三、計算屬性和偵聽器：Computed和Watch
在Vue 3中，可以使用`computed`函數創建計算屬性，使用`watch`函數創建偵聽器。
`computed`函數接收一個getter函數，并返回一個只讀的響應式對象。當getter函數內部依賴的響應式對象發生變化時，計算屬性會自動重新計算。例如：
```javascript
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
console.log(doubleCount.value); // 0
count.value++;
console.log(doubleCount.value); // 2
```
`watch`函數用于偵聽一個或多個響應式對象的變化，并執行相應的回調函數。它接收三個參數：要偵聽的源對象、回調函數和可選的配置選項。例如：
```javascript
import { ref, watch } from 'vue';
const count = ref(0);
watch(
count,
(newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}.`);
},
{ immediate: true }
);
count.value++;
// 輸出: Count changed from 0 to 1.
```
四、生命周期鉤子函數
Vue 3提供了一系列的生命周期鉤子函數，用于在組件的不同生命周期階段執行自定義邏輯。這些鉤子函數包括：
- `onBeforeMount`：在組件掛載之前執行。
- `onMounted`：在組件掛載后執行。
- `onBeforeUpdate`：在組件更新之前執行。
- `onUpdated`：在組件更新后執行。
- `onBeforeUnmount`：在組件卸載之前執行。
- `onUnmounted`：在組件卸載后執行。
下面是一個使用生命周期鉤子函數的示例：
```javascript
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const count = ref(0);
let timer = null;
onMounted(() => {
timer = setInterval(() => {
count.value++;
}, 1000);
});
onUnmounted(() => {
clearInterval(timer);
});
return {
count,
};
},
};
```
在這個示例中，我們在組件掛載后使用`setInterval`啟動一個定時器，每秒遞增`count`的值。在組件卸載前，我們清除了定時器，避免內存泄漏。
五、總結
Composition API是Vue 3的重要特性之一，它為組件的邏輯組織提供了更加靈活和可復用的方案。通過使用Setup函數、響應式系統、計算屬性、偵聽器和生命周期鉤子函數等核心概念，開發者可以更好地管理組件的狀態和行為，提高代碼的可維護性和可復用性。
掌握Composition API，可以幫助開發者更好地應對日益復雜的前端應用開發挑戰，提高開發效率和代碼質量。隨著Vue 3的不斷成熟和生態的完善，Composition API必將成為前端開發者必備的技能之一。
