区别 相同点 都是两组虚拟dom的对比(react16.8之后是fiber与虚拟dom的对比) 都是深度优先 只对同级节点进行对比,简化了算法复杂度 都用key做为唯一标识,进行查找,只有key和标签类型相同时才会复用老节点 不同点 react在diff遍历的时候,只对需要修改的节点进行了记录,形成effect list,最后才会根据effect list 进行真实dom的修改,修改时先删除,然后更新与移动,最后插入 vue 在遍历的时候就用真实dominsertBefore方法,修改了真实dom,最后做的删除操作 react 采用单指针从左向右进行遍历 vue采用双指针,从两头向中间进行遍历 react的虚拟diff比较简单,vue中做了一些优化处理,相对复杂,但效率更高
补充
补充:Vue 与 React 的 diff 差异主要来自「静态标记」和「遍历策略」两个方面,是理解两个框架更新粒度差异的关键。
核心差异:
- 静态节点跳过:Vue3 在编译阶段给静态节点打
patchFlag,diff 时直接跳过;React 16+ 通过 Fiber + 调度也能中断,但需要遍历到节点才能判断是否需要更新。 - 遍历方向:React 使用单向链表,只能从左到右遍历;Vue 维护双端队列,可以从两头向中间逼近,命中率的常见 case 更友好。
- 副作用收集时机:React 在 commit 阶段统一执行 effect;Vue 在 patch 过程中直接调用真实 DOM,提交阶段压力更小。
- 移动策略:React 用 lastPlacedIndex + maxIndex 判断是否需要移动;Vue 通过 4 种指针假设(头头、尾尾、头尾、尾头)快速定位可复用节点。
- 复杂度体感:算法本质都是 O(n),但 Vue 的静态提升 + patchFlag 让常见场景的实际比较次数更少。



