Vue 3 选项式 API 和组合式 API 区别
选项式 API (Options API)
选项式 API，可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
优点：
1.上手简单，位置固定
缺点：
一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含很多个方法，往往分不清哪个方法对应着哪个功能，而且当你想要新增一个功能的时候你可能需要在 data，methods，computed，watch中都要写一些东西，但是这个时候每个选项里面的内容很多你需要上下来回的翻滚，特别影响效率。
vue3 如下
<template>
</template>
<script lang="ts">
import {
defineComponent, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
name: 'xxx',
components: {
},
setup() {
const state = reactive({
checked: {
path: '/', query: {
id: 111 } },
});
onMounted(async () => {
});
return {
...toRefs(state),
};
},
});
</script>
组合式 API (Composition API)
组合式 API，可以使用导入的 API 函数来描述组件逻辑，是一系列 API 的集合，可以使用函数的方式书写 Vue 组件。
组合式 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。
在单文件组件中，组合式 API 通常会与< script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，< script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。
优点：
Composition API最大的优点通俗的讲就是把跟一个功能相关的东西放在一个地方，它是目前最合理也是最容易维护的，你可以随时将功能的一部分拆分出去。你可以将每一个功能相关所有的东西比如methods，computed都放在如上图的function中，这个function可以独立的存在，可以放在一个TS文件中，也可在npm中单独发布，最终Composition API把他们组合起来
总结：更清晰，更好的逻辑复用，体积更小。
类似react hooks
缺点：
学习成本增加，思维改变
<template>
</template>
<script setup lang="ts">
import {
defineProps } from 'vue';
const props = defineProps({
/** autoplay */
xxx: {
type: [String, Number],
default: 3000,
},
});
</script>
<style lang="scss" scoped>
</style>
如果写组件的话 建议 组合式 API (Composition API) 假如配合storybook 可以更好的支持以及更清晰！！！。