重提Vue3 的 Diff 算法

Vue3 的 Diff 算法是其虚拟 DOM (Virtual DOM) 更新机制的核心，它负责高效地比较新旧虚拟节点树 (VNode tree) 的差异，并最小化对真实 DOM 的操作，从而提升渲染性能。Vue3 的 Diff 算法在 Vue2 的基础上进行了优化，引入了"最长递增子序列"等概念，进一步提升了更新效率。

1. 虚拟 DOM (Virtual DOM) 简介

在深入 Diff 算法之前，我们首先需要理解虚拟 DOM。虚拟 DOM 是一个轻量级的 JavaScript 对象，它代表了真实 DOM 的结构。当组件状态发生变化时，Vue 不会直接操作真实 DOM，而是先构建一个新的虚拟 DOM 树，然后将新旧虚拟 DOM 树进行比较，找出差异，最后只将这些差异应用到真实 DOM 上。

VNode 结构示例：

javascript 复制代码

// 这是一个简化的 VNode 结构
const VNode = {
  type: 'div', // 元素类型，可以是字符串（如'div'）或组件对象
  props: {    // 元素的属性，如class, style, onClick等
    class: 'container',
    onClick: () => console.log('clicked')
  },
  children: [ // 子节点，可以是VNode数组或字符串
    {
      type: 'p',
      props: null,
      children: 'Hello Vue3'
    },
    {
      type: 'span',
      props: { style: 'color: red;' },
      children: 'Diff Algorithm'
    }
  ],
  key: 'unique-key' // 唯一标识符，用于Diff算法的优化
};

2. Diff 算法的核心思想

Diff 算法的核心思想是：

同层比较： 只比较同一层级的节点，不进行跨层比较。如果一个组件的根元素类型变了，Vue 会直接销毁旧的组件及其所有子节点，然后创建新的组件及其子节点。这大大降低了比较的复杂度。
类型和 Key 比较： 当比较同层级的节点时，首先会比较它们的 type（标签类型或组件类型）和 key。key 是一个非常重要的优化手段，它能帮助 Vue 识别哪些节点是新增的、哪些是删除的、哪些是移动的，从而避免不必要的 DOM 操作。

3. Diff 算法的阶段

Vue3 的 Diff 算法主要分为以下几个阶段：

3.1 `patch` 函数入口

patch 函数是 Diff 算法的入口，它负责比较新旧 VNode，并根据比较结果执行相应的 DOM 操作。

javascript 复制代码

function patch(n1, n2, container, anchor = null) {
  // n1: 旧 VNode, n2: 新 VNode
  // container: 真实 DOM 容器
  // anchor: 插入的锚点

  // 如果旧 VNode 存在且新旧 VNode 类型不同，则直接卸载旧 VNode
  if (n1 && !isSameVNodeType(n1, n2)) {
    unmount(n1);
    n1 = null;
  }

  const { type, shapeFlag } = n2;

  switch (type) {
    case Text: // 文本节点
      processText(n1, n2, container, anchor);
      break;
    case Comment: // 注释节点
      processComment(n1, n2, container, anchor);
      break;
    case Static: // 静态节点
      processStatic(n1, n2, container, anchor);
      break;
    case Fragment: // Fragment 节点
      processFragment(n1, n2, container, anchor);
      break;
    default:
      if (shapeFlag & ShapeFlags.ELEMENT) { // 普通元素节点
        processElement(n1, n2, container, anchor);
      } else if (shapeFlag & ShapeFlags.COMPONENT) { // 组件节点
        processComponent(n1, n2, container, anchor);
      } else if (shapeFlag & ShapeFlags.TELEPORT) { // Teleport 节点
        processTeleport(n1, n2, container, anchor);
      } else if (shapeFlag & ShapeFlags.SUSPENSE) { // Suspense 节点
        processSuspense(n1, n2, container, anchor);
      }
  }
}

// 辅助函数：判断是否是相同类型的 VNode
function isSameVNodeType(n1, n2) {
  return n1.type === n2.type && n1.key === n2.key;
}

3.2 `processElement` 处理元素节点

当 patch 函数处理到普通元素节点时，会调用 processElement 函数。这个函数会根据 n1 是否存在来决定是挂载新元素还是更新现有元素。

javascript 复制代码

function processElement(n1, n2, container, anchor) {
  if (n1 == null) {
    // 挂载新元素
    mountElement(n2, container, anchor);
  } else {
    // 更新现有元素
    patchElement(n1, n2, container, anchor);
  }
}

3.3 `patchElement` 更新元素

patchElement 是更新元素的核心函数，它会比较新旧 VNode 的 props 和 children。

javascript 复制代码

function patchElement(n1, n2, container, anchor) {
  const el = (n2.el = n1.el); // 复用旧 VNode 的真实 DOM 元素

  const oldProps = n1.props || {};
  const newProps = n2.props || {};

  // 1. 更新 props
  patchProps(el, n2, oldProps, newProps);

  // 2. 更新 children
  patchChildren(n1, n2, el, anchor);
}

3.4 `patchProps` 更新属性

patchProps 函数负责比较新旧 props，并更新真实 DOM 元素的属性。

javascript 复制代码

function patchProps(el, vnode, oldProps, newProps) {
  // 遍历新 props，更新或添加属性
  for (const key in newProps) {
    if (key !== 'key' && key !== 'ref') { // 忽略 key 和 ref
      const oldValue = oldProps[key];
      const newValue = newProps[key];
      if (newValue !== oldValue) {
        hostPatchProp(el, key, oldValue, newValue);
      }
    }
  }

  // 遍历旧 props，移除不再存在的属性
  for (const key in oldProps) {
    if (key !== 'key' && key !== 'ref' && !(key in newProps)) {
      hostPatchProp(el, key, oldProps[key], null); // 将值设为 null 表示移除
    }
  }
}

// hostPatchProp 是一个抽象函数，具体实现由渲染器提供
// 例如对于 DOM 元素，它会调用 el.setAttribute 或 el.style.setProperty 等
// function hostPatchProp(el, key, prevValue, nextValue) { /* ... */ }

3.5 `patchChildren` 更新子节点

patchChildren 是 Diff 算法最复杂的部分，它处理子节点的更新策略。Vue3 针对子节点的不同情况，采用了不同的优化策略：

新旧子节点都是文本： 直接更新 textContent。
旧子节点是文本，新子节点是数组： 卸载旧文本节点，挂载新子节点数组。
旧子节点是数组，新子节点是文本： 卸载旧子节点数组，设置新文本内容。
新旧子节点都是数组： 这是最复杂的情况，会进入 Diff 核心算法。

javascript 复制代码

function patchChildren(n1, n2, container, anchor) {
  const c1 = n1.children;
  const c2 = n2.children;

  const prevShapeFlag = n1.shapeFlag;
  const shapeFlag = n2.shapeFlag;

  // 新子节点是文本
  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      // 旧子节点是数组，新子节点是文本 -> 卸载旧子节点，设置文本
      unmountChildren(c1);
    }
    if (c2 !== c1) {
      // 新旧文本内容不同 -> 更新文本
      hostSetElementText(container, c2);
    }
  } else {
    // 新子节点是数组或空
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      // 旧子节点是数组
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        // 新旧子节点都是数组 -> 进入核心 Diff 算法
        patchKeyedChildren(c1, c2, container, anchor);
      } else {
        // 新子节点是空，旧子节点是数组 -> 卸载所有旧子节点
        unmountChildren(c1);
      }
    } else {
      // 旧子节点是文本或空
      if (prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
        // 旧子节点是文本 -> 清空文本
        hostSetElementText(container, '');
      }
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        // 新子节点是数组 -> 挂载新子节点
        mountChildren(c2, container, anchor);
      }
    }
  }
}

4. `patchKeyedChildren` 核心 Diff 算法（双端 Diff + 最长递增子序列）

当新旧子节点都是数组时，Vue3 会进入 patchKeyedChildren 函数，这是 Diff 算法最精妙的部分。它结合了双端 Diff 和最长递增子序列 (Longest Increasing Subsequence, LIS) 算法来高效地处理节点移动。

双端 Diff 算法：

双端 Diff 算法通过四个指针 i (新旧列表头部)、e1 (旧列表尾部)、e2 (新列表尾部) 来进行比较。它尝试从两端同时进行匹配，以减少比较次数。

javascript 复制代码

function patchKeyedChildren(c1, c2, container, parentAnchor) {
  let i = 0; // 新旧列表头部指针
  const l2 = c2.length;
  let e1 = c1.length - 1; // 旧列表尾部指针
  let e2 = l2 - 1; // 新列表尾部指针

  // 1. 从头部开始，同步比较相同前缀
  while (i <= e1 && i <= e2) {
    const n1 = c1[i];
    const n2 = c2[i];
    if (isSameVNodeType(n1, n2)) {
      patch(n1, n2, container, parentAnchor);
    } else {
      break;
    }
    i++;
  }

  // 2. 从尾部开始，同步比较相同后缀
  while (i <= e1 && i <= e2) {
    const n1 = c1[e1];
    const n2 = c2[e2];
    if (isSameVNodeType(n1, n2)) {
      patch(n1, n2, container, parentAnchor);
    } else {
      break;
    }
    e1--;
    e2--;
  }

  // 3. 处理剩余部分
  // 情况一：新节点比旧节点多（新增）
  if (i > e1) {
    if (i <= e2) {
      const nextPos = e2 + 1;
      const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;
      while (i <= e2) {
        patch(null, c2[i], container, anchor);
        i++;
      }
    }
  }
  // 情况二：旧节点比新节点多（删除）
  else if (i > e2) {
    while (i <= e1) {
      unmount(c1[i]);
      i++;
    }
  }
  // 情况三：新旧节点都有剩余（乱序或有增删改）
  else {
    const s1 = i; // 旧列表剩余部分的开始索引
    const s2 = i; // 新列表剩余部分的开始索引

    // 构建新列表剩余部分的 key 到索引的映射
    const keyToNewIndexMap = new Map();
    for (i = s2; i <= e2; i++) {
      const nextChild = c2[i];
      if (nextChild.key != null) {
        keyToNewIndexMap.set(nextChild.key, i);
      }
    }

    let patched = 0; // 已处理的新节点数量
    const toBePatched = e2 - s2 + 1; // 新列表剩余部分的节点总数
    let moved = false; // 是否发生移动
    let lastNewIndex = 0; // 记录上一个已处理的新节点的索引，用于判断是否需要移动

    // 创建一个映射数组，记录旧列表中节点在新列表中的位置
    // 0 表示该旧节点在新列表中不存在
    // index + 1 表示该旧节点在新列表中的索引 (因为 0 有特殊含义)
    const newIndexToOldIndexMap = new Array(toBePatched).fill(0);

    // 遍历旧列表剩余部分
    for (i = s1; i <= e1; i++) {
      const prevChild = c1[i];
      if (patched >= toBePatched) {
        // 如果新列表所有节点都已处理，则直接卸载剩余的旧节点
        unmount(prevChild);
        continue;
      }

      let newIndex;
      if (prevChild.key != null) {
        newIndex = keyToNewIndexMap.get(prevChild.key);
      } else {
        // 如果没有 key，则遍历新列表查找相同类型的节点
        for (let j = s2; j <= e2; j++) {
          if (newIndexToOldIndexMap[j - s2] === 0 && isSameVNodeType(prevChild, c2[j])) {
            newIndex = j;
            break;
          }
        }
      }

      if (newIndex === undefined) {
        // 旧节点在新列表中不存在 -> 卸载
        unmount(prevChild);
      } else {
        // 旧节点在新列表中存在 -> 标记已处理，并进行 patch
        newIndexToOldIndexMap[newIndex - s2] = i + 1; // 记录旧节点在新列表中的位置

        if (newIndex < lastNewIndex) {
          // 如果当前新节点的索引小于上一个已处理的新节点的索引，说明发生了移动
          moved = true;
        }
        lastNewIndex = newIndex;

        patch(prevChild, c2[newIndex], container, null); // 递归 patch 子节点
        patched++;
      }
    }

    // 4. 处理移动和新增
    const increasingNewIndexSequence = moved
      ? getSequence(newIndexToOldIndexMap)
      : [];

    let j = increasingNewIndexSequence.length - 1;

    // 从后往前遍历新列表剩余部分
    for (i = toBePatched - 1; i >= 0; i--) {
      const nextIndex = s2 + i; // 新列表中当前节点的真实索引
      const nextChild = c2[nextIndex];
      const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;

      if (newIndexToOldIndexMap[i] === 0) {
        // 新节点在新列表中不存在于旧列表 -> 新增
        patch(null, nextChild, container, anchor);
      } else if (moved) {
        // 需要移动
        if (j < 0 || i !== increasingNewIndexSequence[j]) {
          // 如果当前节点不在最长递增子序列中，则需要移动
          hostInsert(nextChild.el, container, anchor);
        } else {
          // 在最长递增子序列中，不需要移动
          j--;
        }
      }
    }
  }
}

// 最长递增子序列 (LIS) 算法
// 用于找出不需要移动的节点，从而最小化 DOM 操作
function getSequence(arr) {
  const p = arr.slice();
  const result = [0];
  let i, j, u, v, c;
  const len = arr.length;
  for (i = 0; i < len; i++) {
    const arrI = arr[i];
    if (arrI !== 0) {
      j = result[result.length - 1];
      if (arr[j] < arrI) {
        p[i] = j;
        result.push(i);
        continue;
      }
      u = 0;
      v = result.length - 1;
      while (u < v) {
        c = ((u + v) / 2) | 0;
        if (arr[result[c]] < arrI) {
          u = c + 1;
        } else {
          v = c;
        }
      }
      if (arrI < arr[result[u]]) {
        if (u > 0) {
          p[i] = result[u - 1];
        }
        result[u] = i;
      }
    }
  }
  u = result.length;
  v = result[u - 1];
  while (u-- > 0) {
    result[u] = v;
    v = p[v];
  }
  return result;
}

最长递增子序列 (LIS) 算法的作用：

在双端 Diff 结束后，对于那些既不在新列表头部也不在尾部，且在新旧列表中都存在的节点，Vue3 会使用 LIS 算法来确定哪些节点是"不需要移动"的。LIS 算法会找到一个最长的子序列，其中所有节点的相对顺序在新旧列表中保持不变。这些节点将保持在原位，而其他节点（不在 LIS 中的节点）则需要进行移动操作。这样可以最大限度地减少 DOM 移动操作，因为 DOM 移动是相对昂贵的操作。

LIS 算法的步骤：

构建 newIndexToOldIndexMap： 这个数组记录了新列表中每个节点在旧列表中的索引（如果存在）。例如，newIndexToOldIndexMap[i] 表示新列表第 i 个节点在旧列表中的索引。如果为 0，则表示该节点是新增的。
计算 LIS： 对 newIndexToOldIndexMap 数组（只考虑非 0 的值）计算最长递增子序列。这个子序列的索引对应着那些在新旧列表中相对位置不变的节点。
执行移动和新增： 遍历新列表的剩余部分。如果一个节点在 newIndexToOldIndexMap 中为 0，说明它是新增的，直接挂载。如果一个节点不在 LIS 中，说明它需要移动，执行 hostInsert 操作。如果一个节点在 LIS 中，则不需要移动。

5. 总结

Vue3 的 Diff 算法通过以下策略实现了高效的虚拟 DOM 更新：

同层比较： 避免了复杂的跨层级比较。
Key 的使用： 提供了高效的节点识别机制，帮助判断节点的增删改移。
双端 Diff： 快速处理新旧列表两端的相同节点，减少比较范围。
最长递增子序列 (LIS)： 精准识别出不需要移动的节点，最小化 DOM 移动操作，这是 Vue3 Diff 算法相比 Vue2 的一个重要优化点，尤其在处理大量节点乱序移动时表现更优。

通过这些优化，Vue3 的 Diff 算法能够在大多数情况下以 O(n) 的时间复杂度完成更新，其中 n 是新旧子节点列表的长度，从而保证了出色的渲染性能。

重提Vue3 的 Diff 算法

1. 虚拟 DOM (Virtual DOM) 简介

2. Diff 算法的核心思想

3. Diff 算法的阶段

3.1 patch 函数入口

3.2 processElement 处理元素节点

3.3 patchElement 更新元素

3.4 patchProps 更新属性

3.5 patchChildren 更新子节点

4. patchKeyedChildren 核心 Diff 算法（双端 Diff + 最长递增子序列）

5. 总结

3.1 `patch` 函数入口

3.2 `processElement` 处理元素节点

3.3 `patchElement` 更新元素

3.4 `patchProps` 更新属性

3.5 `patchChildren` 更新子节点

4. `patchKeyedChildren` 核心 Diff 算法（双端 Diff + 最长递增子序列）