Composition API（组合API）也是Vue3中最重要的一个功能了，之前的2.x版本采用的是Options API（选项API），即官方定义好了写法：data、computed、methods，需要在哪里写就在哪里写，这样带来的问题就是随着功能增加，代码也越来复杂，我们看代码需要上下反复横跳：
Composition API对比
?
上图中，一种颜色代表一个功能，我们可以看到Options API的功能代码比较分散；
Composition API则可以将同一个功能的逻辑，组织在一个函数内部，利于维护。
?
我们首先来看下之前Options API的写法：
export default {
components: {},
data() {},
computed: {},
watch: {},
mounted() {},
}
Options API 就是将同一类型的东西放在同一个选项中，当我们的数据比较少的时候，这样的组织方式是比较清晰的；但是随着数据增多，我们维护的功能点会涉及到多个data和methods，但是我们无法感知哪些data和methods是需要涉及到的，经常需要来回切换查找，甚至是需要理解其他功能的逻辑，这也导致了组件难以理解和阅读。
而 Composition API 做的就是把同一功能的代码放到一起维护，这样我们需要维护一个功能点的时候，不用去关心其他的逻辑，只关注当前的功能；Composition API 通过 setup 选项来组织代码：
export default {
setup(props, context) {}
};
我们看到这里它接收了两个参数props和context，props就是父组件传入的一些数据，context是一个上下文对象，是从2.x暴露出来的一些属性：
○ attrs
○ slots
○ emit
?
注：props的数据也需要通过toRefs解构，否则响应式数据会失效。
?
我们通过一个Button按钮来看下setup具体的用法：
<template>
<div>{{ state.count }} * 2 = {{ double }}</div>
<div>{{ num }}</div>
<div @click="add">Add</div>
</template>
<script>
import { reactive, computed, ref } from "vue";
export default {
name: "Button",
setup() {
const state = reactive({
count: 1,
});
const num = ref(2);
function add() {
state.count++;
num.value += 10;
}
const double = computed(() => state.count * 2);
return {
state,
double,
num,
add,
};
},
};
</script>
很多童鞋可能就有疑惑了，这跟我在data和methods中写没什么区别么，不就是把他们放到一起么？我们可以将 setup 中的功能进行提取分割成一个一个独立函数，每个函数还可以在不同的组件中进行逻辑复用：
export default {
setup() {
const { networkState } = useNetworkState();
const { user } = userDeatil();
const { list } = tableData();
return {
networkState,
user,
list,
};
},
};
function useNetworkState() {}
function userDeatil() {}
function tableData() {}
说完组合API，下期我们开始说 Fragment。
感觉有用请点赞关注本人博客👇