什么是组合式API？

组合式 API (Composition API) 是一系列 API （响应式API、生命周期钩子、依赖注入）的集合。它不是函数式编程，组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变

为什么要有组合式API？

1、更好的逻辑复用

它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷

组合式函数：

可以参考我的关于组合式函数理解的博客：什么是组合式函数？-CSDN博客

mixins 的缺陷：

• 不清晰的数据来源：

当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰

• 命名冲突：

多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突

• 隐式的跨mixin交流：

多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起

2、更灵活的代码组织

下面通过各功能代码的分布让大家直观感受到选项式API和组合式API的区别（同一个功能的代码用同一个颜色标注）

总结：选项式 API 在单个组件的逻辑复杂到一定程度时，会面临一些无法忽视的限制；组合式API则相对来说会更加灵活整齐，也使代码易于维护

3、更好的类型推导

• 选项式API：（不理想）

2013 年被设计出来的，那时并没有把类型推导考虑进去，因此不得不做了一些复杂到夸张的类型体操才实现了对选项式 API 的类型推导。但尽管做了这么多的努力，选项式 API 的类型推导在处理 mixins 和依赖注入类型时依然不甚理想

• Class API：（没有继续发展）

基于 Class 的 API 非常依赖 ES 装饰器，在 2019 年我们开始开发 Vue 3 时，它仍是一个仅处于 stage 2 的语言功能。认为基于一个不稳定的语言提案去设计框架的核心 API 风险实在太大了，因此没有继续向 Class API 的方向发展

• 组合式 API ：（比较完善）

主要利用基本的变量和函数，它们本身就是类型友好的。用组合式 API 重写的代码可以享受到完整的类型推导，不需要书写太多类型标注

4、更小的生产包体积

<script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。不像选项式 API 需要依赖 this 上下文对象访问属性，被编译的模板可以直接访问 <script setup> 中定义的变量，无需从实例中代理，这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

5、和 React Hooks 的对比

Hooks：

• Hooks 有严格的调用顺序，并不可以写在条件分支中
• React 组件中定义的变量会被一个钩子函数闭包捕获，若开发者传递了错误的依赖数组，它会变得“过期”，导致非常依赖ESLint 规则以确保传递了正确的依赖，但在一些边缘情况时仍会遇到令人头疼的、不必要的报错信息。
• 昂贵的计算需要使用 useMemo，这也需要传入正确的依赖数组
• 在默认情况下，传递给子组件的事件处理函数会导致子组件进行不必要的更新
• 要解决变量闭包导致的问题，再结合并发功能，使得很难推理出一段钩子代码是什么时候运行的，并且很不好处理需要在多次渲染间保持引用 (通过 useRef) 的可变状态

组合式API:

• 仅调用 setup() 或<script setup> 的代码一次，不需要担心闭包变量的问题。组合式 API 也并不限制调用顺序，还可以有条件地进行调用。
• Vue 的响应性系统运行时会自动收集计算属性和侦听器的依赖，因此无需手动声明依赖。
• 无需手动缓存回调函数来避免不必要的组件更新。

总结：React Hooks 的创造性，它是组合式 API 的一个主要灵感来源。然而，它的设计也确实存在上面提到的问题，而 Vue 的响应性模型恰好提供了一种解决这些问题的方法

总结

组合式 API 提供更高的逻辑复用性和灵活性，使得代码更清晰、更易维护，同时优化了性能和包体积。