京东云开发者｜关于“React 和 Vue 该用哪个”我真的栓Q( 四 ) _生活百科

文章插图

Vue是借助 ES6 的API拦截数据操作，分别在数据读取、设置阶段进行依赖的收集和通知，数据的依赖其实是一个个 Watcher 对象（Watcher 可能是组件、计算属性、或者 Watch方法）。如果 Watcher 是组件的情况，则再调用组件的 render 函数生成虚拟DOM ，与旧虚拟 DOM 做对比，进行更细粒度的 UI 更新。在这里借助依赖收集和局部的 DOM Diff，平衡了全量 DOM Diff 带来的性能影响。更新机制如下图（来自 Vue 官网）：

文章插图
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)
其他：本章节的数据对比，是对已有结果的总结

对比内容1）持续时间，这里进行的主要是数据量较大的列表操作，对比维度为：

文章插图
2）启动指标，主要从以下几个方面对比：

- 加载时长：主要指标是TTI（Time To Interactive），指从页面开始加载到页面可进行交互的时长， TTI 值越?。碛没Э梢愿绲夭僮饕趁?，体验就越好
- 主线程工作时间：包含样式、布局、执行逻辑等
- 网络传输字节数：指加载页面中所有资源的成本
- 结果如下图，仍然是Vue的成绩较为优秀：

文章插图
3）以 MB 为单位的内存分配，对比维度为：

文章插图

4）聊些对比之外的话以上在运行时的对比都是以1000行数据为基准做参考，问各位小伙伴一个问题，如果数据量更庞大呢，5w行或者10w行，再或者50w行？数据会有变化吗？各位可以再思考一下这个问题：那仅仅从以数据作为评测标准又是否可行呢？其实笔者不以为然，虽然React的数据落于下风，但是从React的 Fiber 架构上看，尤其涉及到超过一定数量级的虚拟 DOM 对比上，React 是具有优势的，此架构下的 Diff 不会阻塞主线程，用户对 UI 界面依然有控制权，虽然页面数据没有更新，但是对于用户的感知是相对友好的。所以笔者认为以下对比数据具有参考性，但并非是决定性的，在框架对比上还是希望各位小伙伴有多方面更理性的思考。

9. 心智模型关于心智负担，有观点认为React重，也有观点认为Vue重，而笔者认为都有道理，原因是两方的关注点不同。
说React重，可以从两方面阐述：