从vue2的接口式API到vue3的组合式API

优点

　　1.逻辑耦合度更高：在options api中如何一个功能我们需要用到 data+method+watch...等更多 api，一段代码无法合并在一起，我们在阅读一段逻辑需要进行反复上下移动进行观看。而composition api就解决了这个问题。

　　2.功能抽离：得益于函数式编程，一个功能逻辑我们可以封装到一个 hook 中，我们直接导入hook，运行方法，即可。

缺点

　　从接口式API切换到组合式API最大的问题就是没有强制的代码分区，如果书写的人没有很好的代码习惯，那么后续的人将会看的十分难受。

　　目前暂时这么解决的：

　　自我代码分区并且尽量抽离方法（写好注释），分区如下：

　　1.相关引入

　　2.响应式数据、props、emit 定义

　　3.生命周期以及 watch 书写

　　4.方法定义

　　5.方法、属性暴露

　　6.组件抽离：将页面拆成两个文件夹，一个为 views，一个为 components。views 和 components 文件夹下有各自的文件。views 文件夹中为页面入口，掌管数据，而 components 则为页面中一些组件抽离。如果是公共组件，再抽离到 components 文件夹下其他位置。

　　7.hook 抽离：尽可能将逻辑抽离，并不一定要进行复用。setup 衍生出的新的 api

组合式 API 基础

为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 setup

新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口

警告：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

setup 选项是一个接收 props 和 context 的函数，我们将在之后进行讨论。此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

 需要先学习了解响应式API