Vue3 引入了Composition API。它是一种更灵活的方式来组织和复用组件的逻辑，而不是依赖于传统的选项式API（如data, methods, computed等）。Composition API的核心是一个名为setup的函数，它可以在组件创建之前执行，并返回一个对象，该对象包含了组件所需的所有属性和方法。
Composition API 带来了什么好处
公众号：Code程序人生，个人网站：https://creatorblog.cn
Vue3比较大的改动就是引入了Composition API来替代之前Vue2开发组件的方式，那么我们需要探讨一下，Composition API有什么好处。
-
Composition API可以让我们按照功能来组织代码，而不是按照选项来分散代码。这样可以让代码更加清晰、可读和可维护，也可以避免一些命名冲突和重复代码的问题
-
Composition API可以让我们更容易地实现逻辑复用，因为它是基于函数的，我们可以把一些通用的逻辑封装成组合式函数，并在不同的组件中复用它们。这样可以减少代码量和提高效率。
-
Composition API可以让我们享受更好的类型推导，因为它是基于 TypeScript 的，我们可以利用 TypeScript 的强大特性来编写更健壮和安全的代码。
-
Composition API对 tree-shaking 友好，因为它只引入了需要的 API，而不是整个 Vue 对象。这样可以减少打包后的文件大小，提高性能。
什么是setup语法糖
在Vue 3.2中，引入了一个新的特性，叫做setup语法糖。
它是一种更简洁和优雅的方式来使用Composition API，无需显式地定义和返回setup函数。
它允许我们直接在<script>标签内使用Composition API的特性，如ref, reactive, computed, watch, onMounted等，并且自动将它们暴露给模板。
如何使用Composition和setup重构Vue组件
为了演示如何使用Composition和setup语法糖重构Vue组件，我们将以一个简单的计数器组件为例。这个组件使用了传统的选项式API，如下所示：
<template>
<div>
<button @click="increment">+</button>
<span>{{ count }}</span>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
}
</script>
要使用setup语法糖重构这个组件，我们需要做以下几个步骤：
- 在
<script>标签上添加setup属性，表示我们要使用<script setup>语法糖。
- 将
data选项中的状态变量用ref函数包裹，并直接赋值给一个常量。这样就可以将普通的值转换为响应式的引用，并且可以在模板中直接访问它们。
- 将
methods选项中的方法直接定义为普通的函数，并且可以直接访问状态变量。
- 删除不再需要的
export default和return语句。
重构后的组件代码如下：
<template>
<div>
<button @click="increment">+</button>
<span>{{ count }}</span>
<button @click="decrement">-</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
function decrement() {
count.value--
}
</script>
可以看到，使用<script setup>语法糖后，我们的组件代码变得更加简洁和清晰，也更容易理解和维护。
当然，这只是一个简单的例子，实际上我们还可以利用Composition API的其他特性来进一步优化和重构我们的组件逻辑，例如使用reactive, computed, watch, onMounted, provide, inject, useXXX等。
总结
本文介绍了如何使用Composition API重构Vue组件，并且介绍了一种更简洁和优雅的方式来使用Composition API，即<script setup>语法糖。
