![京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q](http://img.zhejianglong.com/231019/0P3453a6-2.png)
文章插图
- Vue是借助 ES6 的API拦截数据操作,分别在数据读取、设置阶段进行依赖的收集和通知,数据的依赖其实是一个个 Watcher 对象(Watcher 可能是组件、计算属性、或者 Watch方法) 。如果 Watcher 是组件的情况,则再调用组件的 render 函数生成虚拟DOM ,与旧虚拟 DOM 做对比,进行更细粒度的 UI 更新 。在这里借助依赖收集和局部的 DOM Diff,平衡了全量 DOM Diff 带来的性能影响 。更新机制如下图(来自 Vue 官网):
![京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q](http://img.zhejianglong.com/231019/0P3454062-3.jpg)
文章插图
8. 性能对比对比说明
- 抛开场景谈性能,就像抛开剂量谈毒性,全是瞎扯,所以本章节性能对比的数据皆有据可查,对比仅覆盖了一些常见场景,但未能覆盖全部场景:
- 框架测试用例仓库(点击查看),截止到2022年6月23日,已有 4.6k Star,
- 对比数据(点击查看),可根据条件筛选框架对比的结果
- 测试中的对比对象:React v18.0.0 和Vuev3.2.37,不包含旧版本框架,本着框架升级带来性能提升的常规认知(反优化的案例也不是没有,但不在这做考虑),本章节默认最新版本的React和Vue在各自历史版本中拥有着最优性能 。
- 测试使用设备配置:i7-8750H, 64 GB RAM, Fedora 36 (Linux 5.17.3, mitigations=off, Wayland)
- 测试使用浏览器:Chrome 102.0.5005.61 (64-bit)
- 其他:本章节的数据对比,是对已有结果的总结
- 创建列表
- 替换所有行
- 局部更新
- 选择行
- 交换行
- 删除行
- 创建多行
- 追加多行
- 删除多行结论:可以看到Vue在此场景中近乎完胜,尤其是交换行的情况下,Vue 更是大幅度领先 。结果可查看下图 , 绿色表示操作所需时间更短 , 红色表示操作所需时间长 。vanillajs 那一列指的是原生 js 下的性能数据 。
![京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q](http://img.zhejianglong.com/231019/0P345D64-4.jpg)
文章插图
2)启动指标,主要从以下几个方面对比:
- 加载时长:主要指标是TTI(Time To Interactive),指从页面开始加载到页面可进行交互的时长 , TTI 值越?。碛没Э梢愿绲夭僮饕趁?,体验就越好
- 主线程工作时间:包含样式、布局、执行逻辑等
- 网络传输字节数:指加载页面中所有资源的成本
- 结果如下图,仍然是Vue的成绩较为优秀:
![京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q](http://img.zhejianglong.com/231019/0P3451137-5.png)
文章插图
3)以 MB 为单位的内存分配,对比维度为:
- 页面加载后的内存使用情况
- 运行内存,添加 1000 行后的内存使用情况
- 每 10 行点击更新 5 次后的内存使用情况
- 单击创建 1000 行 5 次后的内存使用情况
- 创建和清除 1000 行 5 次后的内存使用情况
- 结果如下图,Vue 依然胜出了:
![京东云开发者|关于“React 和 Vue 该用哪个”我真的栓Q](http://img.zhejianglong.com/231019/0P3452524-6.png)
文章插图
- 4)聊些对比之外的话以上在运行时的对比都是以1000行数据为基准做参考,问各位小伙伴一个问题 , 如果数据量更庞大呢,5w行或者10w行,再或者50w行?数据会有变化吗?各位可以再思考一下这个问题:那仅仅从以数据作为评测标准又是否可行呢?其实笔者不以为然,虽然React的数据落于下风 , 但是从React的 Fiber 架构上看,尤其涉及到超过一定数量级的虚拟 DOM 对比上,React 是具有优势的,此架构下的 Diff 不会阻塞主线程,用户对 UI 界面依然有控制权 , 虽然页面数据没有更新,但是对于用户的感知是相对友好的 。所以笔者认为以下对比数据具有参考性,但并非是决定性的,在框架对比上还是希望各位小伙伴有多方面更理性的思考。
说React重,可以从两方面阐述:
- 乱花渐欲迷人眼:React 官方只维护了的核心库,对于状态管理、CSS隔离方案等均交给了社区,这样做可以很大程度上提升开发者的参与度 , 也很容易诞生一些优秀的想法,造成社区内俨然就是一副百花齐放的繁荣景象,但是这也恰好是缺陷所在,在大型的React项目中,一旦缺少强约定,甚至能出现好几种状态管理和Fetch库,使开发者对项目维护、工具选择都出现困扰 , 于是“百花争鸣”也很容易变成“乱花渐欲迷人眼”了 。而Vue则提供了核心库以外的状态管理、路由等,官方的库质量也有所保障,开发者只要无脑使用即可 。
推荐阅读
- 京东云开发者|ElasticSearch降本增效常见的方法
- 云原生之旅 - 6)不能错过的一款 Kubernetes 应用编排管理神器 Kustomize
- Windows下自动云备份思源笔记到Gitee
- 云原生之旅 - 5)Kubernetes时代的包管理工具 Helm
- 云顶之弈碧波法师阵容怎么玩
- 云上当空接龙规则(接龙规则口诀)
- 云上空当接龙怎么玩(空当接龙怎么玩教学说明)
- mqtt_simple例程 nrf9160做主控连接阿里云——
- 云顶之弈S7.5怒玉豹女阵容怎么玩
- 云顶之弈玉龙怎么换形锤阵容