带你掌握Vue3新宠——快速Diff算法

前言

我们都知道Vue 2中用的diff算法是双端Diff。而Vue 3的其中一个特性就是把底层的diff算法改成了快速Diff。

与字面意思一样，快速diff是目前已知的最快的diff算法。

本文将带大家解剖一下快速diff的原理。

预处理

在真正进入Diff之前，快速Diff会先执行一段”预处理“的前置操作。目的是先把可以直接排除的项去掉，降低diff的操作量。这个思路来自与unix等操作系统的文件内容diff，举个例子：

welcome to Guangdong, i hope you have a great travel.
welcome to Beijing, i hope you have a great travel.

上方的2行文中，在diff时会先从左边开始对比。一直到Guangdong和Beijing，发现不一样就停止。然后从右边开始找发现右边也是一直到Guangdong和Beijing才不同。因此，就找出了不同点Guangdong和Beijing。

---

预处理本质上是为了”对齐“，diff是一个繁琐的过程，涉及到新增，删除，改顺序，替换等操作。但无论是什么操作，最后新旧两组节点应该都要长度一样。即如果新比旧长，就要把新的多出部分新增补齐，如果是旧比新长，就要把旧的多出部分删除对齐。

Vue 3中的预处理

了解完上述的理论背景之后，我们来看一下在Vue 3中是怎么实现的。假设现在有下图的两组新旧节点组：

按照快速diff的预处理，我们会先扫描两组的前后内容：

  function patchKeyedChildren(n1, n2, container) {
    // 拿到两组Children节点组
    const newChildren = n2.children
    const oldChildren = n1.children
    // 用j定义头索引
    let j = 0
    let oldVNode = oldChildren[j]
    let newVNode = newChildren[j]
    
    // 开始扫描头部
    // while 循环向后遍历，直到遇到拥有不同 key 值的节点为止
    while (oldVNode.key === newVNode.key) {
      // 调用 patch 函数更新
      patch(oldVNode, newVNode, container)
      j++
      oldVNode = oldChildren[j]
      newVNode = newChildren[j]
    }

    // ========================================
    // 开始处理尾部
    // 由于尾部跟头部不同，它们可能不一样。因此需要定义各自的索引
    let oldEnd = oldChildren.length - 1
    let newEnd = newChildren.length - 1

    oldVNode = oldChildren[oldEnd]
    newVNode = newChildren[newEnd]
    
    // 开始扫描尾部
    // while 循环向前遍历，直到遇到拥有不同 key 值的节点为止
    while (oldVNode.key === newVNode.key) {
      // 调用 patch 函数更新
      patch(oldVNode, newVNode, container)
      oldEnd--
      newEnd--
      oldVNode = oldChildren[oldEnd]
      newVNode = newChildren[newEnd]
    }
    // ...
  }

我把代码相关的描述写在注释中，大家可以看到现在我们通过j，