Vue的Diff算法通过同层比对、双端预处理、key驱动复用和就地patch，实现最小化DOM操作；Vue 3进一步引入静态标记与LIS算法优化性能。
Vue 的 Diff 算法不是为了“炫技”，而是为了解决一个实际问题：数据变，视图怎么更新才又快又稳？它不重绘整棵 DOM，而是通过比对新旧虚拟节点（VNode），精准定位真正需要改动的地方，把 DOM 操作压到最少。
为什么必须用 Diff 而不是直接重渲染？
真实 DOM 操作代价很高——每次增删改都可能触发浏览器重排（reflow）和重绘（repaint）。如果每次响应式更新都清空容器、重新挂载所有节点，哪怕只是改个按钮文字，也会造成大量冗余操作。Diff 算法让 Vue 能在“数据变了”和“DOM 怎么动”之间架起一座高效桥梁：只更新变化的属性、只替换差异的子节点、只移动必要的元素。
Diff 的核心策略：四步落地最小更新
Vue（尤其 Vue 3）的 Diff 不是暴力遍历，而是一套有顺序、有判断、有复用的确定性流程：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 同层比对：只比较同一深度的兄弟节点，不跨级递归。父节点一换，子树整体卸载重建，避免误判和无限嵌套开销
- 双端预处理：先比新旧子节点的头（start）和尾（end），快速收掉大量顺序一致的节点；头尾都匹配不上时，再进入中间查找环节
- key 驱动复用：v-for 列表中，相同 key 的节点直接复用 DOM 元素及其内部状态（比如 input 的光标位置、滚动条偏移、组件内部的 ref 实例）
- 就地 patch 优先：类型相同的节点（如都是 <div>），仅更新 props、事件绑定、子内容，不销毁重建；只有标签名或关键属性（如 is、:is）变化时，才走替换逻辑
Vue 3 的进阶优化：静态标记与最长递增子序列
Vue 3 在基础 Diff 上加了两层智能预判：
立即学习“前端免费学习笔记（深入）”；
- 静态标记（PatchFlag）：编译阶段就识别出哪些节点永远不会变（比如纯文本、无绑定的 div），打上静态标记；Diff 时跳过这些节点，只聚焦动态部分
- 最长递增子序列（LIS）：当节点顺序发生乱序（如拖拽排序、filter 过滤），Vue 3 不靠 key 盲目移动，而是基于 key 映射构建索引序列，用 LIS 算法算出最少移动步骤，让 DOM 位移更少、性能更稳
你写的每一行模板，都在调用 Diff
Tab 切换不闪屏，是因为 key 控制了动态组件的正确复用；列表滚动后焦点还在原输入框，是因为 key 保住了 DOM 实例；filter 后列表项平滑位移，背后是 LIS 在规划移动路径。这些体验不是偶然，是 Diff 算法在数据响应链条末端默默完成的精准调度。
