vue2中Options API 和 vue3中Composition API 的对比
2023-09-11 14:22:30 时间
回顾一下:
在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重用逻辑代码,容易发生命名冲突且关系不清)
相关文章
- vue3 自定义hook
- vite+vue3使用tailwindcss
- Vue3新特性体验--中(Composition API)
- Vue3 Composition API: 对比ref和reactive
- Vue3之新的api
- vue3响应式reactive的实现原理;proxy深层代理;vue3响应式api
- 浅析vue2中 Options API 和vue3中 Composition API 的对比
- 浅析Vue3新特性-Teleport(任意传送门也称瞬间移动):为什么需要Teleport、与React的Portals特性、如何使用(直接使用、与组件搭配使用、使用多个teleport)、teleport API(to及disabled使用介绍)
- vue3组合API(setup函数,系列二)
- Vue3单页面多布局的实现
- VUE3使用watch监测数据变化
- vue3-lazy 的使用