众所周知，Vue3中引入了一种新的语法来书写代码，那就是Compositon API（组合式API）
那么vue3为什么要添加组合式API，它可以解决哪些问题？
在 Vue2中，随着功能的增加，组件越来越复杂，维护起来也越来越难。而难以维护的根本原因是 Vue2 的Options API设计迫使开发者使用监视、计算、方法来组织代码，而不是实际的业务逻辑。使用传统Options API中，新增或者修改一个需求，就需要分别在data，methods，computed，watch里修改 ，你要去找这个data在哪个对应的methods中被修改过，如果业务逻辑复杂你还需要通过搜索属性名称的方式来寻找，这很明显不是一种好的开发方式。
另外 Vue2 缺乏一个简单而低成本的机制来完成逻辑重用，虽然你可以 minxis 完全重用逻辑，但是当 mixin 更多的时候，就使得很难找到相应的数据，计算出来也许是从中 mixin 的方法，使得类型推断变得困难。
因此Compositon API，主要是解决Options API带来的问题。
首先是代码组织。组合API开发者可以根据业务逻辑组织自己的代码，把相关的数据、处理逻辑放到一起，这就是一种关注点的聚合，让代码更具可读性和可扩展性。也就是说，当下一个开发者接触到这段不是自己写的代码， 他可以更好地利用代码的组织来反转实际的业务逻辑，或者根据业务逻辑更好地理解代码。
二是实现代码的逻辑提取和重用。当我需要把某个功能添加到另一个项目时，我可以很方便地找到这个功能所有的相关代码并复用。当然mixin逻辑提取和重用也可以实现，但就像我之前说的，多个mixin在作用于同一个组件时，很难看出mixin的属性，来源不明确，另外，多个mixin的属性存在变量命名冲突的风险。而 Composition API 恰恰解决了这两个问题。
通过几个图片可以很直观的感受到这两种语法思想上的区别和Compositon API带来的好处
vue2的方式：
业务相关代码被分割了
随着业务复杂度提升，业务代码关联性变得越来越差
vue3的方式：
将同一个功能的相关代码组合到一起
按功能来划分为一个个模块，易于维护和复用
可以看出，Compositon API带来了阅读和维护方面的巨大进步
参考文章：https://blog.csdn.net/qq_22182989/article/details/125781704
网友评论