众所周知,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