Vue 3 Diff 算法中的 getSequence 源码解析

Vue 3 Diff 算法中的 getSequence 源码解析

概述

Vue 3 中的 getSequence 函数是虚拟 DOM diff 算法的重要组成部分，用于优化节点移动操作。该函数实现了一个高效的最长递增子序列（Longest Increasing Subsequence，简称 LIS）算法，时间复杂度为 O(n log n)。本文将详细解析这段源码的实现原理及其在 Vue 3 diff 算法中的应用。

源码实现

以下是 Vue 3 中 getSequence 函数的完整源码：github.com/vuejs/core/...

function getSequence(arr: number[]): number[] {
  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) >> 1
        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
}

源码详解

这个算法可以分为三个主要部分：初始化、构建候选序列和回溯构建最终结果。

1. 初始化

const p = arr.slice() // 创建数组副本，用于记录路径
const result = [0]    // 结果数组，初始包含第一个元素的索引

• p 数组用于记录前驱节点，帮助我们在最后回溯构建真正的最长递增子序列
• result 数组初始化为包含原数组的第一个元素索引

2. 构建候选序列

for (i = 0; i < len; i++) {
  const arrI = arr[i]
  if (arrI !== 0) { // 跳过值为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) >> 1  // 位运算，等同于Math.floor((u + v) / 2)
      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
    }
  }
}

这部分是算法的核心，使用贪心策略和二分查找构建候选序列：

1. 遍历原数组中的每个非零元素
2. 如果当前元素大于 result 数组中最后一个索引对应的元素，则直接将当前索引添加到 result 数组中
3. 否则，使用二分查找在 result 数组中找到第一个大于等于当前元素的位置，并用当前索引替换它
4. 在替换过程中，记录前驱节点信息到 p 数组中

重要说明 ：在这个阶段，result 数组并不直接表示最长递增子序列，而是表示各种长度的递增子序列的最优可能性。具体来说：

• result[i] 表示长度为 i+1 的递增子序列中，可能的最小结尾元素的索引
• 这种贪心策略确保了对于同样长度的递增子序列，我们总是保留结尾元素最小的那个，这样后续有更多机会接上更多元素

3. 回溯构建最终结果

u = result.length
v = result[u - 1]
while (u-- > 0) {
  result[u] = v
  v = p[v]  // 通过前驱数组回溯
}

这部分使用前面记录的前驱节点信息，从最长递增子序列的最后一个元素开始，逐步回溯构建完整的最长递增子序列：

1. 从 result 数组的最后一个元素（最长递增子序列的最后一个元素的索引）开始
2. 通过 p 数组记录的前驱节点信息，逐步回溯填充 result 数组
3. 最终，result 数组包含的是原数组中最长递增子序列的索引

在 Vue 3 Diff 算法中的应用

在 Vue 3 的虚拟 DOM diff 算法中，getSequence 函数用于优化节点移动操作。具体应用场景如下：

背景：Vue 3 的 Diff 算法

Vue 3 在比较新旧子节点列表时，会经历以下步骤：

1. 从头部开始比较，处理相同的前缀节点
2. 从尾部开始比较，处理相同的后缀节点
3. 处理剩余的节点（新增、删除、移动）

在第3步中，为了最小化 DOM 操作，Vue 需要确定哪些节点需要移动以及如何移动。

getSequence 的作用

在处理需要移动的节点时，Vue 使用 getSequence 函数找出最长递增子序列，这个子序列代表了不需要移动的节点。算法流程如下：

1. 首先，Vue 会为新旧子节点建立一个映射关系，确定哪些节点是保留的（而不是新增或删除的）
2. 对于保留的节点，Vue 会记录它们在新子节点列表中的位置索引
3. 使用 getSequence 函数找出这些位置索引的最长递增子序列
4. 这个最长递增子序列表示的是：如果按照这个顺序放置节点，可以最小化移动操作
5. 只需要移动不在最长递增子序列中的节点

具体实现

在 Vue 3 的源码中，相关实现位于 packages/runtime-core/src/renderer.ts 文件中的 patchKeyedChildren 函数。简化的逻辑如下：

// 获取最长递增子序列的索引
const increasingNewIndexSequence = getSequence(newIndexToOldIndexMap)

// 从后向前遍历，以便正确移动节点
for (i = toBePatched - 1; i >= 0; i--) {
  const nextIndex = s2 + i
  const nextChild = c2[nextIndex]
  // ... 其他逻辑 ...
  
  if (newIndexToOldIndexMap[i] === 0) {
    // 新增节点
    patch(null, nextChild, ...)
  } else {
    // 移动或保持不动的节点
    if (j < 0 || i !== increasingNewIndexSequence[j]) {
      // 不在最长递增子序列中，需要移动
      move(nextChild, container, ...)
    } else {
      // 在最长递增子序列中，不需要移动
      j--
    }
  }
}

为什么使用最长递增子序列？

最长递增子序列在这里的意义是：

1. 递增：保证了节点的相对顺序不变
2. 最长：确保了移动操作最少
3. 子序列：允许中间有其他元素（可以通过移动其他节点来处理）

通过保持最长递增子序列中的节点不动，Vue 可以最小化 DOM 操作，提高渲染性能。

算法复杂度分析

• 时间复杂度：O(n log n)，其中 n 是数组长度。主循环需要 O(n)，而每次循环中的二分查找需要 O(log n)。
• 空间复杂度：O(n)，需要额外的数组来存储路径信息和结果。

总结

Vue 3 中的 getSequence 函数是一个高效的最长递增子序列算法实现，它在虚拟 DOM diff 过程中发挥着关键作用，通过最小化节点移动操作来优化渲染性能。这是 Vue 3 性能优秀的重要因素之一。

理解这个算法的关键在于：

1. 贪心策略：对于同样长度的递增子序列，结尾元素越小越好
2. 二分查找：快速定位应该替换的位置
3. 前驱记录：通过记录前驱节点信息，最终回溯构建真正的最长递增子序列
4. 在 diff 算法中的应用：找出不需要移动的节点序列，最小化 DOM 操作