| 导语 Composition API是Vue3的最大特点，也可以很明显看出他是受到React Hooks的启发。本文主要来讲讲Vue为什么要使用一个新的概念来组织代码。
为了解决什么问题？
首先来看看这个新的东西的出现，是为了解决Vue 2的什么问题。 当前使用Vue2开发的项目，普遍存在的问题：
- 代码的可读性随着组件变大而变差
- 每一种代码复用的方式，都存在缺点
- TypeScript支持有限
我们来详细看一下这些问题的出现和Composition API带来的解决方案
代码可读性逐渐变差
假设我们要写一个搜索框组件，首先它存在一个基础功能-搜索，则代码结构如下：
过了一段时间，产品经理说要加了个排序的需求，组件代码就变成这样：
目前看着还行，直到经过一个又一个迭代，例如加上了搜索过滤功能，分页功能等等，各种新增功能的代码块，写在项目里的各个位置（不同组件，props，computed，生命周期函数，data，methods）。
分散在各个地方的逻辑片段，使我们的组件越来越难以阅读，经常为了看一个功能要疯狂上下滑动屏幕，在各个区块里翻找和修改。
而在这个场景下，使用Composition API可以将同一功能的代码写在同一个区域里，无论是维护性还是可读性都是更好的。
显而易见，如果我们能把相同功能的代码放在一起，是比分散的写更易读的，使用Vue3提供的新函数setup就能实现。setup在目前在Vue3中是可选属性，使用原有的组件写法也是完全兼容的。
初次看到setup的这种粗暴用法，很多人都会想到，这不是要我写一个巨大的setup函数，把所有的组件逻辑全塞进setup函数里吗？
实际上，你只要把不同的功能逻辑代码都用函数封装起来，这种巨型setup函数就不会出现。这一个个封装起来的功能函数，就是Composition函数，或者你也可以叫他们“Vue Hooks”。
这种将代码按照功能分块的代码组织方式，很好的解决了第一个问题，我们接下里看第二个需要解决的问题。
没有一个完美的代码复用方案
当谈到代码复用，在Vue2中有三种常用的方式，而每一种方式都存在限制。
Vue2代码复用1-Mixins
Mixins的优点： 可以将代码按照功能组织区分 Mixins的缺点：
- 存在冲突隐患，你有可能在使用过程中出现属性或函数的重名冲突
- 依赖关系不清晰，特别是在多个Mixins存在交流的情况下。
- 逻辑复用不够灵活，如果你需要在不同的组件间差异化或配置化使用Mixins的话。
Vue2代码复用2-Mixin Factory
使用一个工厂函数，根据传入配置，返回对应的Mixin内容。 上面的2和3，可以通过使用Mixin Factory方式部分解决，但是依然无法解决的是：
- 重名隐患始终存在。
- 属性来源依然不清晰，需要进入每个Minxin文件内查看暴露的属性
- 没有跑在运行时，因此Mixin工厂函数没法动态生成
Vue2代码复用3-Scoped Slots
优点： 解决了上面的所有缺点 缺点：
- 配置只能写在template上
- 增加了模板嵌套，降低可读性
- 暴露的属性只能在template上使用
- 实现相同的功能需要嵌套更多的组件，性能降低
Vue3代码复用
可以看到，上述每种代码复用的方式都存在自己的劣势，Vue3的Composition API提供了第四种代码复用的解决方案。
通过对可复用代码的抽离，我们的代码组织可能变成这样：
这样，我们可以对复用的逻辑进行随意的组合和配置，并放入setup函数内执行。
好处：
- 没有了各种分散的区块，我们可以写更少的代码，也更容易将可以复用的逻辑从组件里抽出到函数里。
- 比原有的Mixins或Slot方式都更加灵活
缺点： 除了要用一下新的语法，好像也没别的缺点了
结语
希望对于为什么要使用Composition API这个问题，看完这篇文章你能得到一些收获。
