从Vue2到Vue3【三】——Composition API（第三章）

**从Vue2到Vue3【三】——Composition API**

在前两章中，我们分别介绍了Vue2.x的基本使用和Vue3.x的新特性。今天我们要讨论的是Vue3.x中的一个非常重要的特性——Composition API。

### Composition API是什么？

Composition API是Vue3.x中的一种新的组件构建方式，它允许你将组件逻辑分解为多个小函数，称为"组合函数"（composition functions），这些函数可以被重用和组合起来，以创建更复杂的组件。

### Composition API的优势Composition API相比于Vue2.x中的选项式API有几个优势：

* **更灵活**: Composition API允许你将组件逻辑分解为多个小函数，这使得你的代码更加灵活和易维护。
* **更可重用**: Composition API允许你将组件逻辑重用在多个组件中，从而减少了代码的冗余度。
* **更易于理解**: Composition API通过将组件逻辑分解为小函数，使得你的代码更加易于理解和维护。

### Composition API的基本使用下面是一个简单的例子，展示了如何使用Composition API来创建一个组件：

javascript// my-composition.jsexport function useCounter() {
 const count = ref(0);
 const increment = () => {
 count.value++;
 };
 return { count, increment };
}

javascript// MyComponent.vue<template>
 <div>
 <p>Count: {{ count }}</p>
 <button @click="increment">+</button>
 </div>
</template>

<script setup>
import { useCounter } from './my-composition.js';
const { count, increment } = useCounter();
</script>

在这个例子中，我们定义了一个名为`useCounter`的组合函数，它返回两个值：一个是计数器的当前值，另一个是用于增加计数器值的函数。然后我们在`MyComponent.vue`中使用了这个组合函数来创建一个组件。

### Composition API的高级特性Composition API还支持一些高级特性，如：

* **响应式数据**: Composition API允许你将数据定义为响应式的，这使得你的组件能够自动更新。
* **生命周期钩子**: Composition API允许你定义组件的生命周期钩子函数，例如`created`、`mounted`等。

下面是一个例子，展示了如何使用Composition API来创建一个响应式数据和生命周期钩子的组件：

javascript// my-composition.jsexport function useCounter() {
 const count = ref(0);
 const increment = () => {
 count.value++;
 };
 return { count, increment };
}

javascript// MyComponent.vue<template>
 <div>
 <p>Count: {{ count }}</p>
 <button @click="increment">+</button>
 </div>
</template>

<script setup>
import { useCounter } from './my-composition.js';
const { count, increment } = useCounter();
onMounted(() => {
 console.log('组件已挂载');
});
</script>

在这个例子中，我们定义了一个名为`useCounter`的组合函数，它返回两个值：一个是计数器的当前值，另一个是用于增加计数器值的函数。然后我们在`MyComponent.vue`中使用了这个组合函数来创建一个组件，并定义了一个生命周期钩子函数`onMounted`。

### 总结Composition API是Vue3.x中的一个非常重要的特性，它允许你将组件逻辑分解为多个小函数，称为"组合函数"（composition functions），这些函数可以被重用和组合起来，以创建更复杂的组件。Composition API相比于Vue2.x中的选项式API有几个优势，如更灵活、更可重用和更易于理解等。

通过阅读本文，你应该能够了解Composition API的基本使用和高级特性，并且能够将其应用到实际项目中。