您现在的位置是：网站首页> 编程资料编程资料

Vue3 diff算法之双端diff算法详解_vue.js_

2023-05-24 408人已围观

简介 Vue3 diff算法之双端diff算法详解_vue.js_

双端Diff算法

双端Diff在可以解决更多简单Diff算法处理不了的场景，且比简单Diff算法性能更好。本篇是以简单Diff算法的案例来展开的，不过没有了解简单Diff算法直接看双端Diff算法也是可以看明白的。

双端比较的原理

引用简单Diff算法的例子 - 案例一

oldVNode: { type: 'div', children: [ { type: 'p', children: '1', key: '1' }, { type: 'p', children: '2', key: '2' }, { type: 'p', children: '3', key: '3' }, ] }, newVNode: { type: 'div', children: [ { type: 'p', children: '3', key: '3' }, { type: 'p', children: '1', key: '1' }, { type: 'p', children: '2', key: '2' } ] }

简单Diff的不足

这个案例使用简单Diff算法来更新它，会发生两次DOM移动操作。然而这并不是最优解，其实只需要将 p - 3 节点移动到 p - 1 对应的真实节点前面就可以。

这是理论上的，简单Diff算法并不能做到这一点，要想实现还得看双端Diff算法。

双端Diff介绍

顾名思义，双端Diff算法就是同时对新旧两组子节点两个端点进行比较的算法，因此需要四个索引值指向新旧虚拟节点列表的两端。

结合该案例来看双端Diff的方式 - 案例二

 newChildren: [ { type: 'p', children: '4', key: '4' }, { type: 'p', children: '2', key: '2' }, { type: 'p', children: '1', key: '1' }, { type: 'p', children: '3', key: '3' } ], oldChildren: [ { type: 'p', children: '1', key: '1' }, { type: 'p', children: '2', key: '2' }, { type: 'p', children: '3', key: '3' }, { type: 'p', children: '4', key: '4' } ]

newStartIdx / newEndIdx / oldStartIdx / oldEndIdx四个指针分别指向新节点的第一个元素 / 新节点的最后一个元素 / 旧节点的第一个元素 / 旧节点的最后一个元素，指向的这四个元素称为 oldStartVNode / oldEndVNode / oldStartVNode / oldEndVNode。有了这些信息就可以互相比较了。

Diff流程

第一次diff

第一步：比较旧的一组子节点中的第一个子节点 p-1 与新的一组子节点中的第一个子节点 P-4，看看它们是否相同。由于两者的 key 值不同，因此不相同，不可复用，手是什么都不做。
第二步：比较旧的一组子节点中的最后一个子节点 p-4 与新的一组子节点中的最后一个子节点 p-3，看看它们是否相同。由于两者的 key 值不同，因此不相同，不可复用，于是什么都不做。
第三步：比较日的一组子节点中的第一个子节点 p-1与新的一组子节点中的最后一个子节点 p-3，看看它们是否相同。由于两者的 key 值不同，因此不相同，不可复用，于是什么都不做。
第四步：比较旧的一组子节点中的最后一个子节点 p-4 与新的一组子节点中的第一个子节点p-4。由于它们的key 值相同，因此可以进行 DOM 复用。

在第四步找到了可以复用的节点，说明它的真实DOM节点可以复用。对于可复用的节点通过移动操作即可完成更新。

那么该如何移动呢？分析下第四步比较过程的细节，第四步比较是比较旧的一组节点中的最后一个子节点和新的一组子节点中的第一个子节点。这说明节点 p - 4 原本是最后一个子节点，但在新的顺序中，它变成了第一个子节点。对应到代码，就是将索引 oldEndIdx 指向的虚拟节点所对应的真实DOM移动到索引 oldStartIdx 指向的虚拟节点所对应的真实DOM前面。

第一次比较完之后的情况如下：

code

第一次比较对应的代码

function insert (el, container, anchor) { container.insertBefore(el, anchor) } function patchChildren (n1, n2, container) { if (typeof n2.children === 'string') { } else if (Array.isArray(n2.children)) { // 到这里说明子节点都是数组类型 patchKeyedChildren(n1, n2, container) } } function patchKeyedChildren (n1, n2, container) { const oldChildren = n1.children const newChildren = n2.children // 四个端点指针 let newStartIdx = 0 let newEndIdx = newChildren.length - 1 let oldStartIdx = 0 let oldEndIdx = oldChildren.length - 1 // 四个端点元素 let newStartVNode = newChildren[newStartIdx] let newEndVNode = newChildren[newEndIdx] let oldStartVNode = oldChildren[oldStartIdx] let oldEndVNode = oldChildren[oldEndIdx] // 开始Diff if (oldStartVNode.key === newStartVNode.key) { // 第一步 oldStartVNode - newStartVNode } else if (oldEndVNode.key === newEndVNode.key) { // 第二步 oldEndVNode - newEndVNode } else if (oldStartVNode.key === newEndVNode.key) { // 第三步 oldStartVNode - newEndVNode } else if (oldEndVNode.key === newStartVNode.key) { // 第四步 oldEndVNode - newStartVNode // 调用patch打补丁 patch(oldEndVNode, newStartVNode, container) // 移动DOM操作 oldEndVNode.el移动 到 oldStartVNode.el 前面 insert(oldEndVNode.el, container, oldStartVNode.el) // 移动DOM操作完成后 oldEndVNode = oldChildren[--oldEndVNode] newStartVNode = newChildren[++newStartVNode] } }

本次Diff完成之后还有其他节点需要继续进行，所以需要将diff的过程放入while循环中。满足以下情况时，说明所有节点更新完毕，因此while的条件为 oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx

第二次diff

第二次diff的情况如图

第一步：比较旧的一组子节点中的头部节点 p-1 与新的一组子节点中的头部节点 p-2，看看它们是否相同。由于两者的key 值不同，不可复用，所以什么都不做。（头部节点：头部素引 oldstartIdx 和 newstartIdx 所指向的节点）
第二步：比较1的一组子节点中的尾部节点 p-3与新的一组子节点中的尾部节点 p-3，两者的 key 值相同，可以复用。另外，由于防者都处于尾部，因此不需要对真实 DOM进行移动操作，只需要打补丁即可。

第二次diff后新旧节点的状态如下

code

第二次比较对应代码

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 开始Diff if (oldStartVNode.key === newStartVNode.key) { // 第一步 oldStartVNode - newStartVNode } else if (oldEndVNode.key === newEndVNode.key) { // 第二步 oldEndVNode - newEndVNode // 调用patch打补丁 patch(oldEndVNode, newEndVNode, container) oldEndVNode = oldChildren[--oldEndIdx] newEndVNode = newChildren[--newEndIdx] } else if (oldStartVNode.key === newEndVNode.key) { // 第三步 oldStartVNode - newEndVNode } else if (oldEndVNode.key === newStartVNode.key) { // 第四步 oldEndVNode - newStartVNode // 调用patch打补丁 patch(oldEndVNode, newStartVNode, container) // 移动DOM操作 oldEndVNode.el移动 到 oldStartVNode.el 前面 insert(oldEndVNode.el, container, oldStartVNode.el) // 移动DOM操作完成后 oldEndVNode = oldChildren[--oldEndVNode] newStartVNode = newChildren[++newStartVNode] } }

第三次diff

第三次diff的情况如图

第一步：比较旧的一组子节点中的头部节点p-1 与新的组子节点的头部节点 p-2,看看它们是否相同。由于两者key值不同不可复用，因此什么都不做。
第二步：比较旧的一组子节点中的尾部节点 p-2与新的一组子节点中的尾部节点 p-1看看它们是否相同，，由于两者key值不同不可复用，因此什么都不做。
第三步：比较旧的一组子节点中的头部节点p-1与新的一组子节申的尾部节点p-1，两者的key 值相同，可以复用。

第三步比较中找到了相同节点，说明 p - 1 原本时头部节点，但在新的顺序中，它变成了尾部节点。因此将p - 1对应的真实DOM移动到旧的子节点的尾部节点 p - 2 对应的真实DOM后面

第三次diff后的新旧节点状态如下图

code

第三次比较对应代码

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 开始Diff if (oldStartVNode.key === newStartVNode.key) { // 第一步 oldStartVNode - newStartVNode } else if (oldEndVNode.key === newEndVNode.key) { // 第二步 oldEndVNode - newEndVNode // 调用patch打补丁 patch(oldEndVNode, newEndVNode, container) oldEndVNode = oldChildren[--oldEndIdx] newEndVNode = newChildren[--newEndIdx] } else if (oldStartVNode.key === newEndVNode.key) { // 第三步 oldStartVNode - newEndVNode patch(oldStartVNode, newEndVNode, container) insert(oldStartVNode.el, container, newEndVNode.el.nextSibling) oldStartVNode = oldChildren[++oldStartIdx] newEndVNode = newChildren[--newEndIdx] } else if (oldEndVNode.key === newStartVNode.key) { // 第四步 oldEndVNode - newStartVNode // 调用patch打补丁 patch(oldEndVNode, newStartVNode, container) // 移动DOM操作 oldEndVNode.el移动 到 oldStartVNode.el 前面 insert(oldEndVNode.el, container, oldStartVNode.el) // 移动DOM操作完成后 oldEndVNode = oldChildren[--oldEndVNode] newStartVNode = newChildren[++newStartVNode] } }

第四次diff

第三次diff的情况如图

第一步：比较旧的一组子节点的头部节点 p - 2 与新的一组子节点中的头部节点 p - 2。发现两者key值相同，可以复用。但两者在新旧两组子节点中都是头部节点，因此不需要移动，只需要patch函数打补丁即可。

diff结果如图

最后while条件为假，退出diff

code

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { // 开始Diff if (oldStartVNode.key === newStartVNode.key) { // 第一步 oldStartVNode - newStartVNode patch(oldStartVNode, newStartVNode, container) oldStartVNode = oldChildren[++oldStartIdx] newStartVNode = newChildren[++newStartIdx] } else if (oldEndVNode.key === newEndVNode.key) { // 第二步 oldEndVNode - newEndVNode // 调用patch打补丁 patch(oldEndVNode, newEndVNode, container) oldEndVNode = oldChildren[--oldEndIdx] newEndVNode = newChildren[--newEndIdx] } else if (oldStartVNode.key === newEndVNode.key) { // 第三步 oldStartVNode - newEndVNode patch(oldStartVNode, newEndVNode, container) insert(oldStartVNode.el, container, newEndVNode.el.nextSibling) oldStartVNode = oldChildren[++oldStartIdx] newEndVNode = newChildren[--newEndIdx] } else if (oldEndVNode.key === newStartV
                提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：一文详解Vue3中简单diff算法的实现_vue.js_
                                                                下一篇：vue electron实现无边框窗口示例详解_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

Vue3 diff算法之双端diff算法详解_vue.js_

目录

双端Diff算法

双端比较的原理

简单Diff的不足

双端Diff介绍

Diff流程

第一次diff

第二次diff

第三次diff

第四次diff

相关内容

点击排行

本栏推荐

猜你喜欢