最长递增子序列（lis）用于找出新旧节点中相对位置未变的稳定锚点，以最小化dom移动；它基于新列表节点在旧列表中的索引数组计算，而非元素值本身。

Vue3 的快速 Diff 算法里，“最长递增子序列”（LIS）不是用来排序的，而是用来**找出哪些节点可以不动、只做最小移动就能匹配新顺序**——本质是“找最稳的锚点”，让 DOM 复用更聪明。

为什么需要最长递增子序列？

当列表顺序变了（比如从 [a, b, c, d] 变成 [d, b, c, a]），Vue 要决定：哪些节点能直接复用？哪些要移动？哪些要新增/删除？

暴力做法是逐个比对、反复移动，性能差。Vue3 换了个思路：先算出新旧节点中相对位置没乱的那批节点——它们构成一个“位置递增”的序列，而最长的那个，就是移动代价最小的复用方案。

LIS 在 Diff 中怎么算出来的？

它不直接对元素值求 LIS，而是对新节点在旧列表中的索引位置求 LIS：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 旧列表：[a, b, c, d] → 索引分别是 0, 1, 2, 3
• 新列表：[d, b, c, a] → 查每个节点在旧列表的位置：d→3, b→1, c→2, a→0 → 得到位置数组：[3, 1, 2, 0]
• 在这个数组里找下标递增、值也递增的最长子序列：比如 [1, 2]（对应 b 和 c），长度为 2；再比如 [0] 或 [3] 都只有 1 个 —— 所以 LIS 是 [1, 2]
• 这意味着：b 和 c 在新旧两列中相对顺序一致，不用动；只需把 d 插到开头、a 移到末尾即可

它和双端 Diff 有什么区别？

Vue2 的双端 Diff 只比头尾，适合“增删在两端”的场景（如 push/pop）；但遇到中间乱序（比如 [a,b,c,d] → [b,d,a,c]），它就会频繁新建/删除节点。

Vue3 的快速 Diff 先做双端预处理（去掉相同前后缀），再对中间部分用 LIS 定位稳定节点——相当于“先剪枝，再找主干”，既保留简单场景的高效，又大幅优化乱序更新。

关键细节：key 为什么不能用 index？

LIS 算法高度依赖 key 的稳定性。如果用数组索引当 key（:key="index"）：

• 插入一个新项，后面所有 index 都变 → 旧节点的“位置映射”全失效 → LIS 找不到有效锚点 → 大量节点被误判为“不同”，触发无谓的重建
• 正确做法是用唯一、稳定、语义化的 key（如 user.id 或 todo.uuid），确保同一逻辑节点在新旧列表中总能映射到同一个旧位置

不复杂但容易忽略：LIS 不是炫技，它是 Vue3 把“人眼觉得该复用”的直觉，翻译成了可计算、可复现的数学策略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！