vue3组合式api太强了,vue3.0 composition api,vue项目中api的配置使用,vue $api,vue-composition-api,vue整合axios
Vue 3.0 组合式 API 是 Vue.js 的一项新特性，它允许开发者更灵活地组织和重用组件逻辑代码。相比于传统的选项式 API，组合式 API 更加直观、可读性更强，并且可以使得组件更易于测试和维护。

组合式 API 基于两个核心概念：Composition Functions（组合函数）和 Reactive Properties（响应式属性）。组合函数是一个 JavaScript 函数，它接受一些参数并返回一个对象，该对象包含了组件模板中需要使用的数据和方法。这些数据和方法可以被其他组件复用或者在不同的场景下进行组合。

下面是一个简单的例子，展示如何使用组合式 API 定义一个 Counter 组件：

vue
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>

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

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

function increment() {
count.value++;
}

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


在上面的代码中，setup() 函数返回了一个对象，其中包含了 count 和 increment 两个变量。count 是一个响应式属性，它可以在组件模板中被直接使用；increment 是一个函数，它会在按钮被点击时增加 count 的值。这个组件可以被其他组件复用，也可以在不同的场景下进行组合。

需要注意的是，在组合式 API 中，我们使用了 ref 函数来创建响应式属性，而不是使用 Vue 2.x 中的 data 和 computed 选项。这是因为 Vue 3.0 中的数据响应系统发生了变化，现在需要显式地将一个普通的 JavaScript 对象转换成响应式对象。