首页 > 其他分享 >Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

时间:2022-10-24 22:44:05浏览次数:49  
标签:代码 Vue3.0 Composition API Api 组件 Options

通常使用Vue2开发的项目,普遍会存在以下问题:

  • 代码的可读性随着组件变大而变差
  • 每一种代码复用的方式,都存在缺点
  • TypeScript支持有限
    以上通过使用Composition Api都能迎刃而解

Composition Api

  • 是Vue3.0新增的api,

  • 一组基于函数的api,

  • 可以更灵活的组织代码逻辑,将当前功能逻辑封装在一个函数中,查看的时候只需找到该功能所对应的函数就行

  • 在 Vue3 Composition API 中,组件根据逻辑功能来组织的,一个功能所定义的所有 API 会放在一起(更加的高内聚,低耦合)
    即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API

Option Api

  • 指的是一个描述组件选项的对象来创建组件的方式
  • 缺点:1、代码的可读性随着组件的变大而变差
    2、代码的复用方式都存在缺点
    3、对TypeScript支持有限

小结

  • 在逻辑组织和逻辑复用方面,Composition API是优于Options API
  • 因为Composition API几乎是函数,会有更好的类型推断。
  • Composition API对 tree-shaking 友好,代码也更容易压缩
  • Composition API中见不到this的使用,减少了this指向不明的情况
  • 如果是小型组件,可以继续使用Options API,也是十分友好的

标签:代码,Vue3.0,Composition,API,Api,组件,Options
From: https://www.cnblogs.com/maxiaohu/p/16823343.html

相关文章

  • 2.4 RedisAPI之list
    1.简介字符串键值结构(keyvalue)特点有序可重复左右两边都可插入和删除2.命令从列表右端插入值rpushkeyvalue1value2......valueN时间复杂度为O(1~n)从列表左端插入值l......
  • 2.6 RedisAPI之zset
    1.简介字符串键值结构(keyscorevalue)特点有序不重复支持集合间操作2.命令向集合内添加元素,element不可以重复但score是可以重复的zaddkeyscoreelement时间复杂度为O(l......
  • 2.5 RedisAPI之set
    1.简介字符串键值结构(keyvalue)特点无序不重复支持集合间操作2.命令向集合内添加元素element,如果element已经存在则添加失败saddkeyelement时间复杂度为O(1)删除集合内......
  • 2.3 RedisAPI之hash
    1.简介字符串键值结构(keyfieldvalue)2.命令设置key对应的field的valuehsetkeyfieldvalue时间复杂度为O(1)获取key对应的field的valuehgetkeyfieldvalue时间复杂度......
  • 2.2 RedisAPI之string
    1.简介字符串键值结构(keyvalue)value的值小于512m,一般建议一个key-value的大小为100k使用场景缓存计数器分布式锁2.命令设置key-value不管key是否存在都设置setkeyvalue......
  • 2.1 RedisAPI之简介
    1.通用命令遍历所有keykeys*keys命令一般不在生产环境使用,主要原因是生产环境下通常有大量的key,列出所有key没有实际的意义并且会消耗很多内存资源。删除指定keydelkey计......
  • 实验7:基于REST API的SDN北向应用实践
    (一)基本要求编写Python程序,调用OpenDaylight的北向接口实现以下功能。(1)利用Mininet平台搭建下图所示网络拓扑,并连接OpenDaylight。(2)下发指令删除s1上的流表数据#!/us......
  • 实验7:基于REST API的SDN北向应用实践
    (一)基本要求编写Python程序,调用OpenDaylight的北向接口实现以下功能(1)利用Mininet平台搭建下图所示网络拓扑,并连接OpenDaylight;(2)下发指令删除s1上的流表数据。import......
  • Vue3, setup语法糖、Composition API全方位解读
    起初Vue3.0暴露变量必须return出来,template中才能使用;Vue3.2中只需要在script标签上加上setup属性,组件在编译的过程中代码运行的上下文是在setup()函数中,无......
  • 4.5 Kafka Consumer API之多线程并发处理
    1.Consumer一对一消费Partition(1).简介这种类型是经典模式,每一个线程单独创建一个KafkaConsumer消费一个partition,用于保证线程安全。(2).代码示例publicclassKafkaCon......