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

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

在上一章节中，我们讨论了Vue3中的Setup函数式组件。然而，在实际开发中，使用Setup函数式组件可能会遇到一些限制，比如无法直接访问组件的props和emits等。在这种情况下，Vue3提供了一种新的API——Composition API。

**什么是Composition API**

Composition API是一种用于构建Vue组件的新方式，它允许你将组件逻辑分解为多个小函数，这些函数可以被组合起来来创建一个完整的组件。这种方式与传统的选项式API相比，更灵活和易于维护。

**Composition API的基本概念**

在Composition API中，组件逻辑被分解为以下几个部分：

* **setup()函数**:这是组件的入口函数，它负责初始化组件的状态和计算属性。
* **ref()函数**:用于创建一个响应式引用，这个引用可以作为组件的状态或计算属性。
* **computed()函数**:用于创建一个计算属性，这个属性会根据依赖项的变化重新计算。
* **watch()函数**:用于监视一个或多个数据源的变化，并执行相应的回调函数。

**Composition API的使用**

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

javascript// my-component.vue<template>
 <div>
 {{ count }}
 <button @click="increment">+</button>
 </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
 setup() {
 const count = ref(0);

 const increment = () => {
 count.value++;
 };

 return {
 count,
 increment };
 }
};
</script>

在这个例子中，我们使用了`ref()`函数来创建一个响应式引用`count`，并使用`computed()`函数来计算一个依赖于`count`的属性。我们还定义了一个`increment`函数来更新`count`的值。

**Composition API与Setup函数式组件的比较**

Composition API和Setup函数式组件都是Vue3中的新API，它们都允许你将组件逻辑分解为多个小函数。但是，两者之间有一个关键的区别：

* **Setup函数式组件**:它是一个函数式组件，它直接返回一个对象，这个对象包含了组件的状态和计算属性。
* **Composition API**:它是一个基于函数的API，它允许你将组件逻辑分解为多个小函数，这些函数可以被组合起来来创建一个完整的组件。

**总结**

在本章节中，我们讨论了Vue3中的Composition API。Composition API是一种用于构建Vue组件的新方式，它允许你将组件逻辑分解为多个小函数，这些函数可以被组合起来来创建一个完整的组件。这种方式与传统的选项式API相比，更灵活和易于维护。

Composition API提供了一种新的API——setup()函数式组件，它允许你将组件逻辑分解为多个小函数，这些函数可以被组合起来来创建一个完整的组件。这种方式与传统的选项式API相比，更灵活和易于维护。

Composition API还提供了一种新的API——ref()函数，它用于创建一个响应式引用，这个引用可以作为组件的状态或计算属性。这种方式与传统的选项式API相比，更灵活和易于维护。

Composition API还提供了一种新的API——computed()函数，它用于创建一个计算属性，这个属性会根据依赖项的变化重新计算。这种方式与传统的选项式API相比，更灵活和易于维护。

Composition API还提供了一种新的API——watch()函数，它用于监视一个或多个数据源的变化，并执行相应的回调函数。这种方式与传统的选项式API相比，更灵活和易于维护。

**参考**

* [Vue3 Composition API]( />* [Setup函数式组件](