vue2中Options API 和 vue3中Composition API 的对比

回顾一下:

在vue2中如何组织代码的我们会在一个vue文件中methods,computed,watch,data中等等定义属性和方法,共同处理页面逻辑,(特定的区域写特定的代码,随着业务复杂度提高,会导致后续维护复杂、复用性不高)

我们称这种方式为Options API

在这里插入图片描述

缺点: 一个功能往往需要在不同的vue配置项中定义属性和方法,比较分散,项目小还好,清晰明了,但是项目大了后,一个methods中可能包含20多个方法你往往分不清哪个方法对应着哪个功能

vue3中的Composition API就是用来解决这个问题的

在vue3 Composition API 中,我们的代码是根据逻辑功能来组织的,一个功能所定义的所有api会放在一起(更加的高内聚,低耦合),这样做,即时项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有API,而不像vue2 Options API 中一个功能所用到的API都是分散的,需要改动功能,到处找API的过程是很费劲的

一个功能所定义的所有api会放在一起:

在这里插入图片描述
在这里插入图片描述

为什么要使用 Composition API:

  • Composition API 是根据逻辑相关性组织代码的,提高可读性和可维护性
  • 基于函数组合的 API 更好的重用逻辑代码(在vue2 Options API中通过Mixins重用逻辑代码,容易发生命名冲突且关系不清)
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容