在vue2中,我们使用的语法是optionAPI,它为我们准备好了一个固定的规则:数据应该放到data里,方法应该放到methods中......这样做有很多好处,比如:学习难度小、代码更容易组织等等,但是对于有些领域optionAPI并不能起效,尤其是在大型组件和逻辑复用上,这点在Vue官方文档上也有提及:
对于大型组件(JS代码有数百行)
不易维护或拆分:optionAPI在开发时固然更容易组织代码了,但是在维护时却需要维护人员不断地上下移动来查看不同区域的不同代码,如果一个组件包含了不同的逻辑,那就更乱了,这种跳跃式的散乱代码非常不利于后续维护,而对于某些项目来说,可维护性要远大于可重用性。
而对于compositionAPI(组合式API)来说,开发人员可以把逻辑和数据组合到一起,而不是散乱在各种配置之中,还可以提取到一个函数或者一个文件中,大大提高了项目的可维护性。
不易在多个组件中提取和复用逻辑
道理和上面基本相同,想要复用js代码就需要从散乱的代码中对数据和方法挨个提取、导入,除非开发时就想好了哪里可以复用,并且将其完整的封装到了一个vue文件中。
组合式API的重点是 把功能或职责相关的代码全部整合到一起,而不是html文件放在html文件夹中,js文件放在js文件夹中,这是optionAPI难以做到的事情(除非组件功能足够单一,但也会存在组件通信繁琐复杂的问题)。
组合式API的缺点是语法更加繁琐,需要记忆的东西更多了(比如import引入、响应式数据的转换、响应式数据修改与展示的.value等等),略微提高了开发耗时,但这不应该是组合式API的思路上的问题,而更多的是Vue3实现上的问题。