Vue3的Diff算法相较于Vue2有了显著的优化与提升,下面是对两者Diff算法的详细对比: 一、Vue2的Diff算法特点 双向递归比对:Vue2的Diff算法采用双向递归策略,从两个虚拟DOM树的根节点开始,向下递归比较所有对应节点,直到比较完成。 节点类型判断: 若新旧节点类型不同,则旧节点及其子节点会被完全替换。 若节点类型相同...
vue2、vue3 的 diff 算法实现差异主要体现在:处理完首尾节点后,对剩余节点的处理方式。 vue2 是通过对旧节点列表建立一个 { key, oldVnode }的映射表,然后遍历新节点列表的剩余节点,根据newVnode.key在旧映射表中寻找可复用的节点,然后打补丁并且移动到正确的位置。 vue3 则是建立一个存储新节点数组中的剩余...
React 是 Fiber 架构的,Fiber 其实是一个链表的结构,但是由于没有设置反向指针,因此没有使用双端比对的方式去优化 Diff 算法(没有反向指针,从右往左遍历链表会很困难)。这一点在 React 源码reconcileChildrenArray函数的注释中也有说明。 React 采用 Fiber 架构的原因是 JavaScript 的运行会阻塞页面的渲染,React 为了...
总结，React、Vue2、Vue3在Diff算法上的差异主要体现在数据结构和处理机制上，React采用Fiber架构以支持异步更新，而Vue框架则通过双端比较优化了Diff算法，使得更新更为高效。在实际应用中，选择适合的框架取决于具体需求和场景，每种框架都有其优势和适用范围。
代码对比是前端一个常见的需求。在 vue2 上我们有 vue-code-diff 可以使用。美中不足的是其只能支持 vue2,且依赖库含有废弃的依赖导致控制台报错,大文件 diff 时渲染速度过慢等问题,再加上我不太适宜原作者的代码结构与开发方式,因此我基于 vue-code-diff ,开发了一个 vue3/vue2 通用的 code diff 插件,...
在前端开发中，代码对比是常见的需求。vue2中，vue-code-diff提供了解决方案。然而，它仅限于vue2且存在一些问题，如依赖库的问题导致警告，大文件渲染速度慢，以及代码结构与开发方式的不适应。为此，我基于vue-code-diff开发了v-code-diff，使其支持vue2和vue3，提升了渲染性能，并添加了异步渲染、...