步步解构Vue双端diff算法，复杂操作轻松玩转

2024-02-15 01:56:28

Vue diff算法 - 双端diff

在探讨双端diff算法之前，我们先来解析一下简单diff算法的不足。

简单diff的劣势

以上示例中，newChildren和oldChildren以及真实dom的对应关系如下图所示，红色箭头代表两者之间具有父子关系：

                           newChildren
                          /   |   \
                     firstChild secondChild thirdChild

                           oldChildren
                            /      \
                      firstChild     thirdChild

可以看到，newChildren的firstChild和thirdChild与oldChildren的firstChild和thirdChild是对应的，但是在简单diff算法中，由于只从前往后遍历，所以它只能检测到firstChild的移动，却无法检测到thirdChild的移动。

这就是简单diff算法的一个劣势，它不能同时处理节点的插入和删除操作。

为了解决这个问题，Vue.js中引入了双端diff算法。

双端diff算法

双端diff算法从两端同时向中间遍历虚拟DOM树，并使用两个指针来跟踪当前的位置。

当两个指针指向的节点相同时，则比较这两个节点的属性，如果属性不同，则更新真实DOM中的节点。

如果两个指针指向的节点不同，则比较这两个节点的tag，如果tag不同，则在真实DOM中插入或删除相应的节点。

如果两个指针指向的节点是同一个节点，但其子节点不同，则递归地比较子节点的差异。

双端diff算法的优势在于，它可以同时处理节点的插入和删除操作，并且具有较高的效率。

双端diff算法的步骤

双端diff算法的步骤如下：

从两端同时向中间遍历虚拟DOM树，并使用两个指针来跟踪当前的位置。
当两个指针指向的节点相同时，则比较这两个节点的属性，如果属性不同，则更新真实DOM中的节点。
如果两个指针指向的节点不同，则比较这两个节点的tag，如果tag不同，则在真实DOM中插入或删除相应的节点。
如果两个指针指向的节点是同一个节点，但其子节点不同，则递归地比较子节点的差异。
重复步骤1-4，直到两个指针相遇。

双端diff算法的示例

function diff(oldChildren, newChildren) {
  // 从两端同时向中间遍历
  let oldStart = 0
  let oldEnd = oldChildren.length - 1
  let newStart = 0
  let newEnd = newChildren.length - 1

  // 比较两个指针指向的节点
  while (oldStart <= oldEnd && newStart <= newEnd) {
    if (oldChildren[oldStart] === newChildren[newStart]) {
      // 属性比较
      patch(oldChildren[oldStart], newChildren[newStart])
      oldStart++
      newStart++
    } else if (oldChildren[oldEnd] === newChildren[newEnd]) {
      // 属性比较
      patch(oldChildren[oldEnd], newChildren[newEnd])
      oldEnd--
      newEnd--
    } else {
      // tag比较
      if (oldChildren[oldStart] === newChildren[newEnd]) {
        // 移动节点
        move(oldChildren[oldStart], newChildren[newEnd])
        oldStart++
        newEnd--
      } else if (oldChildren[oldEnd] === newChildren[newStart]) {
        // 移动节点
        move(oldChildren[oldEnd], newChildren[newStart])
        oldEnd--
        newStart++
      } else {
        // 插入节点
        insert(newChildren[newStart])
        newStart++
      }
    }
  }

  // 处理剩余的节点
  if (oldStart <= oldEnd) {
    // 删除节点
    remove(oldChildren.slice(oldStart, oldEnd + 1))
  } else if (newStart <= newEnd) {
    // 插入节点
    insert(newChildren.slice(newStart, newEnd + 1))
  }
}