前期准备

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 类型声明：