文章插图
- 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)
- 其他：本章节的数据对比，是对已有结果的总结
- 创建列表
- 替换所有行
- 局部更新
- 选择行
- 交换行
- 删除行
- 创建多行
- 追加多行
- 删除多行结论：可以看到Vue在此场景中近乎完胜，尤其是交换行的情况下，Vue 更是大幅度领先 。结果可查看下图 ， 绿色表示操作所需时间更短 ， 红色表示操作所需时间长 。vanillajs 那一列指的是原生 js 下的性能数据 。
文章插图
2）启动指标，主要从以下几个方面对比：
- 加载时长：主要指标是TTI（Time To Interactive），指从页面开始加载到页面可进行交互的时长 ， TTI 值越?。碛没Э梢愿绲夭僮饕趁?，体验就越好
- 主线程工作时间：包含样式、布局、执行逻辑等
- 网络传输字节数：指加载页面中所有资源的成本
- 结果如下图，仍然是Vue的成绩较为优秀：
文章插图
3）以 MB 为单位的内存分配，对比维度为：
- 页面加载后的内存使用情况
- 运行内存，添加 1000 行后的内存使用情况
- 每 10 行点击更新 5 次后的内存使用情况
- 单击创建 1000 行 5 次后的内存使用情况
- 创建和清除 1000 行 5 次后的内存使用情况
- 结果如下图，Vue 依然胜出了：
文章插图
- 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怒玉豹女阵容怎么玩
- 云顶之弈玉龙怎么换形锤阵容
