iis服务器助手广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue3diff算法之双端diff算法详解
  • 271

0
分享到

Vue3diff算法之双端diff算法详解

2024-04-02 19:04:59 271人浏览 薄情痞子
摘要

目录双端Diff算法双端比较的原理简单Diff的不足双端Diff介绍Diff流程第一次diff第二次diff第三次diff第四次diff双端Diff的优势非理想情况的处理方式添加新元

双端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 === 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 - 3的节点，然后将其移动到p - 1之前。

只需要一次DOM操作就能完成更新。

非理想情况的处理方式

上面是一个比较理想的例子，四个步骤分别都能匹配到对应的元素，实际上并非所有情况都能匹配到。

比如 - 案例三

  newChildren: [
    { type: 'p', children: '2', key: '2' },
    { type: 'p', children: '4', key: '4' },
    { 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' }
  ]

进行第一轮比较时，无法命中四个步骤中的任何一步。

  • p - 1 === p - 2
  • p - 4 === p - 3
  • p - 1 === p - 3
  • p - 4 === p - 2

因此只能通过额外的步骤来处理非理想情况。头部尾部都不能命中，那么旧看非头/尾部的节点能否命中，拿新的一组子节点的头部节点去旧的一组子节点中查找。

在旧的一组子节点中，找到与新的一组子节点头部节点具有相同key值的节点，意味着要将找到的子节点移动到真实DOM的头部。

查找结果如图

code

对应功能代码

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 开始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
    } else {
      // 上面四个步骤都没有命中

      // 遍历旧的一组子节点，视图寻找与newStartVNode拥有相同key值的节点
      // idInOld就是新的一组子节点的头部节点在旧的一组子节点中的索引
      const idInOld = oldChildren.findIndex(
        node => node.key === newStartVNode.key
      )
      // idInOld > 0说明找到了可复用的节点，并且需要将其对应的真实DOM移动到头部
      if (idInOld > 0) {
        // 找到匹配到的节点，也就是需要移动的节点
        const vNodeToMove = oldChildren[idInOld]
        // 调用 patch 更新
        patch(vNodeToMove, newStartVNode, container)
        // 将vNodeToMove插入到头部节点oldStartVNode.el之前
        insert(vNodeToMove.el, container, oldStartVNode.el)
        // 由于位置 idInOld 处的节点对应的真实DOM已经发生移动，因此将其设置为 undefined
        oldChildren[idInOld] = undefined
        // 最后更新 newStartVNode 到下一个位置
        newStartVNode = newChildren[++newStartVNode]
      }

    }
  }

接下来第二个和第三个新节点都可以通过双端对比找到匹配的节点，过程与 第二个案例 同理。

直到最后一个节点，此时旧节点列表的头部节点是 undefined，因为该节点已经被处理过了，所以不需要再处理它，直接跳过即可。

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 开始Diff
    // 如果头部或尾部节点为undefined，说明已经处理过了，直接跳过
    if (!oldStartVNode) {
      oldStartVNode = oldChildren[++oldStartIdx]
    } else if (!oldEndVNode) {
      oldEndVNode = oldChildren[--oldEndIdx]
    } else 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
    } else {
      }
    }
  }

接下来的情况与上个案例同理。

添加新元素

当我们拿新的一组子节点中的头部节点去旧的一组子节点中寻找可复用节点时，并不是一定能找到。

案例四

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

双端查找没有匹配到

循环查找也没有匹配到

p - 4经过双端对比，循环查找都没有找到匹配的节点，说明 p - 4 是一个新增节点，应该将它创建并挂载到正确的位置。

那么应该挂载到什么位置呢，因为节点p - 4时新的一组子节点中的头部节点，所以只需要将它挂载到当前头部节点之前即可。头部节点指的是旧的一组子节点中的头部节点对应的真实DOM节点 p - 1。

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 开始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
    } else {
      // 上面四个步骤都没有命中

      // 遍历旧的一组子节点，视图寻找与newStartVNode拥有相同key值的节点
      // idInOld就是新的一组子节点的头部节点在旧的一组子节点中的索引
      const idInOld = oldChildren.findIndex(
        node => node.key === newStartVNode.key
      )
      // idInOld > 0说明找到了可复用的节点，并且需要将其对应的真实DOM移动到头部
      if (idInOld > 0) {
        // 找到匹配到的节点，也就是需要移动的节点
        const vNodeToMove = oldChildren[idInOld]
        // 调用 patch 更新
        patch(vNodeToMove, newStartVNode, container)
        // 将vNodeToMove插入到头部节点oldStartVNode.el之前
        insert(vNodeToMove.el, container, oldStartVNode.el)
        // 由于位置 idInOld 处的节点对应的真实DOM已经发生移动，因此将其设置为 undefined
        oldChildren[idInOld] = undefined
        // 最后更新 newStartVNode 到下一个位置
        newStartVNode = newChildren[++newStartVNode]
      } else {
        // 将 newStartVNode作为新节点挂载到头部，使用当前头部节点 oldStartVNode.el 作为锚点
        patch(null, newStartVNode, container, oldStartVNode.el)
      }
      // 更新头部节点
      newStartVNode = newChildren[++newStartIdx]
    }
  }

当条件 idInOld > 0不成立时，说明没有可以复用的节点，又由于newStartVNode是头部节点，因此应该将其作为新的头部节点进行挂载操作。

剩下节点的操作类似于案例二。

新增节点可能在最后一次匹配到 - 案例五

  newChildren: [
    { type: 'p', children: '4', key: '4' },
    { type: 'p', children: '1', key: '1' },
    { type: 'p', children: '2', key: '2' },
    { 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' }
  ]

这里省去双端匹配的流程

由于变量oldStartIdx 的值大于oldEndIdx的值，满足更新停止的条件，更新停止了。但看图可知，p - 4在整个更新过程中被一楼了，没有得到任何处理。

因此可得：新的一组子节点中有一六得节点需要作为新节点挂载。索引值位于newStartIdx 和 newEndIdx 之间得所有节点都是新节点。挂载时得锚点仍然使用当前头部节点 oldStartVNode.el。

因为此时旧节点列表中得节点可能为undefined，因此可能出现问题；但新节点列表得顺序已经被更新了，所以更新过得新节点对应得真实DOM顺序都已经重新牌列，便可以取锚点：

const anchor = newChildren[newEndIdx + 1] ? newChildren[newEndIdx + 1].el : null

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  
  }
  // 说明有新节点需要挂载
  if (oldEndIdx < oldStartIdx && newStartIdx <= newEndIdx) {
    for (let i = newStartIdx; i < newEndIdx; i++) {
      const anchor = newChildren[newEndIdx + 1] ? newChildren[newEndIdx + 1].el : null
      patch(null, newChildren[i], container, anchor)
    }
  }

移除不存在得节点

除了新增节点得问题后，还可能存在需要移除的节点 - 案例六

  newChildren: [
    { 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' }
  ]

第一次、第二次循环的步骤于案例二同理

新节点更新完之后，发现还存在未处理的旧节点，这便是需要删除的节点。

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  
  }
  // 说明有新节点需要挂载
  if (oldEndIdx < oldStartIdx && newStartIdx <= newEndIdx) {
    for (let i = newStartIdx; i < newEndIdx; i++) {
      const anchor = newChildren[newEndIdx + 1] ? newChildren[newEndIdx + 1].el : null
      patch(null, newChildren[i], container, anchor)
    }
  } else if (newEndIdx < newStartIdx && oldStartIdx <= oldEndIdx) {
    // 有需要删除的节点
    for (let i = oldStartIdx; i < oldEndIdx; i++) {
      unmount(oldChildren[i])
    }
  }

双端Diff完整代码

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]

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 开始Diff
    // 如果头部或尾部节点为undefined，说明已经处理过了，直接跳过
    if (!oldStartVNode) {
      oldStartVNode = oldChildren[++oldStartIdx]
    } else if (!oldEndVNode) {
      oldEndVNode = oldChildren[--oldEndIdx]
    } else 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 === 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]
    } else {
      // 上面四个步骤都没有命中

      // 遍历旧的一组子节点，视图寻找与newStartVNode拥有相同key值的节点
      // idInOld就是新的一组子节点的头部节点在旧的一组子节点中的索引
      const idInOld = oldChildren.findIndex(
        node => node.key === newStartVNode.key
      )
      // idInOld > 0说明找到了可复用的节点，并且需要将其对应的真实DOM移动到头部
      if (idInOld > 0) {
        // 找到匹配到的节点，也就是需要移动的节点
        const vNodeToMove = oldChildren[idInOld]
        // 调用 patch 更新
        patch(vNodeToMove, newStartVNode, container)
        // 将vNodeToMove插入到头部节点oldStartVNode.el之前
        insert(vNodeToMove.el, container, oldStartVNode.el)
        // 由于位置 idInOld 处的节点对应的真实DOM已经发生移动，因此将其设置为 undefined
        oldChildren[idInOld] = undefined
        // 最后更新 newStartVNode 到下一个位置
        newStartVNode = newChildren[++newStartVNode]
      } else {
        // 将 newStartVNode作为新节点挂载到头部，使用当前头部节点 oldStartVNode.el 作为锚点
        patch(null, newStartVNode, container, oldStartVNode.el)
      }
      // 更新头部节点
      newStartVNode = newChildren[++newStartIdx]
    }
  }

  if (oldEndIdx < oldStartIdx && newStartIdx <= newEndIdx) {
    // 说明有新节点需要挂载
    for (let i = newStartIdx; i < newEndIdx; i++) {
      const anchor = newChildren[newEndIdx + 1] ? newChildren[newEndIdx + 1].el : null
      patch(null, newChildren[i], container, anchor)
    }
  } else if (newEndIdx < newStartIdx && oldStartIdx <= oldEndIdx) {
    // 有需要删除的节点
    for (let i = oldStartIdx; i < oldEndIdx; i++) {
      unmount(oldChildren[i])
    }
  }
}

以上就是vue3 diff算法之双端diff算法详解的详细内容，更多关于Vue3双端diff算法的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue3diff算法之双端diff算法详解

本文链接: http://www.lsjlt.com/news/166770.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Vue3diff算法之双端diff算法详解
    目录双端Diff算法双端比较的原理简单Diff的不足双端Diff介绍Diff流程第一次diff第二次diff第三次diff第四次diff双端Diff的优势非理想情况的处理方式添加新元...
    99+
    2024-04-02
  • 一文详解Vue 的双端 diff 算法
    目录前言diff 算法简单 diff双端 diff总结前言 Vue 和 React 都是基于 vdom 的前端框架，组件渲染会返回 vdom，渲染器再把 vdom 通过增删改的 ap...
    99+
    2024-04-02
  • 深入了解Vue2中的的双端diff算法
    目录简单diff算法更新文本节点key的作用如何移动呢双端diff算法比较方式非理想情况的处理方式今天又重读了vue2的核心源码，主要之前读vue2源码的时候纯属的硬记，或者说纯粹的...
    99+
    2023-02-08
    Vue双端diff算法 Vue diff算法
  • Vue的双端diff算法怎么实现
    这篇文章主要介绍了Vue的双端diff算法怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue的双端diff算法怎么实现文章都会有所收获，下面我们一起来看看吧。前言Vue 和 React 都是基于 vd...
    99+
    2023-07-02
  • Vue中的双端diff算法怎么应用
    这篇文章主要讲解了“Vue中的双端diff算法怎么应用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中的双端diff算法怎么应用”吧！Vue 和 React 都是基于 vdom 的前端...
    99+
    2023-07-02
  • React Diff算法不采用Vue的双端对比原因详解
    目录前言React 官方的解析Fiber 的结构Fiber 链表的生成React 的 Diff 算法第一轮，常见情况的比对第二轮，不常见的情况的比对重点如何协调更新位置信息小结图文解...
    99+
    2024-04-02
  • vue3diff算法示例
    目录一、可能性（常见）：二、找规律三、算法优化最长的递增子序列完整代码一、可能性（常见）： 1. 旧的：a b c新的：a b c d 2. 旧的：  a b c新的：d ...
    99+
    2024-04-02
  • React diff算法超详细讲解
    目录diff 算法介绍diff 策略tree diffcomponent diffelement diff结合源码看 diff整体流程新内容为 REACT_ELEMENT_TYPE新...
    99+
    2022-11-13
    React diff算法原理 React diff算法源码
  • 详解C++图搜索算法之双端队列广搜
    目录广度优先遍历双端队列BFS例题：AcWing 175. 电路维修解题思路AC代码广度优先遍历 广度优先遍历是一种按照层次顺序进行访问的方法，它具有以下两种重要性质： 在访问完所有...
    99+
    2024-04-02
  • Vue3diff算法的简单解刨
    目录性能比较前置与后置的预处理节点无序最长递增子序列上篇我们介绍了vue2中的双端diff算法的优势（相比于简单算法相同场景下移动DOM次数更少）。如今Vue3的势头正盛，在diff...
    99+
    2023-02-09
    Vue3 diff算法 Vue diff算法 Vue3 diff
  • vue.js diff算法原理详细解析
    目录diff算法的概念虚拟Domh函数diff对比规则patchpatchVnodeupdateChildren总结diff算法的概念 diff算法可以看作是一种对比算法，...
    99+
    2024-04-02
  • vue diff算法全解析
    目录前言 Vue 更新视图 patch sameVnode patchVnodeupdateChildren 前言 我们知道 Vue 使用的是虚拟 DOM 去减少对真实 DOM 的...
    99+
    2024-04-02
  • 详解react应用中的DOM DIFF算法
    目录前言 什么是Virtual DOM? 使用Virtual DOM的原因 DOM 渲染页面的操作流程 Virtual DOM的优势如何将DOM用virtual DOM 来表...
    99+
    2024-04-02
  • Vue2 的 diff 算法规则原理详解
    目录前言算法规则diff 优化策略老数组的开始与新数组的开始老数组的结尾与新数组的结尾老数组的开始与新数组的结尾老数组的结尾与新数组的开始以上四种情况都没对比成功推荐在渲染列表时为节...
    99+
    2024-04-02
  • react diff算法源码解析
    目录单节点Diff reconcileSingleElement多节点Diff reconcileChildrenArray如何判断节点移动了？ 总结 React中Diff算法又称为...
    99+
    2024-04-02
  • 快速搞懂Vue2 diff算法（图文详解）
    前置内容既然是对比新旧 VNode 数组，那么首先肯定有 对比 的判断方法：sameNode(a, b)、新增节点的方法 addVnodes、移除节点的方法 removeVnodes，当然，即使 sameNode 判断了 VNode 一致之...
    99+
    2023-05-14
    Vue2 Vue diff算法
  • react中的虚拟dom和diff算法详解
    虚拟DOM的作用 首先我们要知道虚拟dom的出现是为了解决什么问题的，他解决我们平时频繁的直接操作DOM效率低下的问题。那么为什么我们直接操作DOM效率会低下呢？ 比如我们创建一个d...
    99+
    2024-04-02
  • C语言算法学习之双向链表详解
    目录一、练习题目二、算法思路1、设计浏览器历史记录2、扁平化多级双向链表3、展平多级双向链表4、二叉搜索树与双向链表一、练习题目 题目链接难度1472. 设计浏览器历史记录★★★☆☆...
    99+
    2024-04-02
  • React diff算法面试考点超详细讲解
    目录前言diff算法的概念手写diff算法的过程前言 在前端工程上，日益复杂的今天，性能优化已经成为必不可少的环境。前端需要从每一个细节的问题去优化。那么如何更优，当然与他的如何怎么...
    99+
    2022-12-19
    React diff算法原理 React diff算法源码
  • Python数据结构与算法的双端队列详解
    目录什么是双端队列​​用Python实现双端队列运用双端队列构建回文检测器总结什么是双端队列​ 双端队列是与队列类似的有序集合。它有一前、一后两端，元素在其中保持自己的位置。与队列不...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作