前期准备
1.使用vue-cli创建一个 vue3 + TS 的项目
2.vscode禁用 Vetur，下载Volar
什么是 setup sugar
在单文件组件（SFC）中引入一个新的 <script> 类型 setup。它向模板公开了所有的顶层绑定。
未使用setup sugar
<template>
</template>
<script>
importFoo from'./Foo.vue'
import{ ref } from'vue'
exportdefault{
setup() {
constcount = ref(1)
constinc = () => { count.value++ }
return{
Foo,
count,
inc
}
}
}
</script>
使用了setup sugar
vue3 组合式写法是否会产生更多问题
目前网络上很多人反应使用组合式 api 反而显得代码更加乱了。那么从vue2的options api到vue3的composition api写法，究竟会获得什么好处呢？
1.逻辑耦合度更高：在options api中如何一个功能我们需要用到 data+method+watch...等更多 api，一段代码无法合并在一起，我们在阅读一段逻辑需要进行反复上下移动进行观看。而composition api就解决了这个问题。
2.功能抽离：得益于函数式编程，一个功能逻辑我们可以封装到一个 hook 中，我们直接导入hook，运行方法，即可。
缺点：从options api切换到composition api最大的问题无异于最大的问题就是没有强制的代码分区，如果书写的人没有很好的代码习惯，那么后续的人将会看的十分难受。目前我是这么解决的：
自我代码分区并且尽量抽离方法（写好注释），分区如下：
1.相关引入
2.响应式数据、props、emit 定义
3.生命周期以及 watch 书写
4.方法定义
5.方法、属性暴露
组件抽离：将页面拆成两个文件夹，一个为 views，一个为 components。views 和 components 文件夹下有各自的文件。views 文件夹中为页面入口，掌管数据，而 components 则为页面中一些组件抽离。如果是公共组件，再抽离到 components 文件夹下其他位置。
hook 抽离：尽可能将逻辑抽离，并不一定要进行复用。
使用 TS 类型声明：
