Vue框架的Diff算法
以下是关于 Diff 算法 的系统梳理:
一、Diff 算法的核心目标
- 最小化 DOM 操作:通过虚拟 DOM 对比,找出真实 DOM 的最小变更集
- 高效节点复用:尽可能复用相同节点,减少创建/销毁开销
- 顺序优化处理:优先处理高频变更场景(如列表尾部追加)
- 保证渲染正确性:正确处理组件状态和 DOM 的对应关系
二、核心算法策略
1. 同级比较原则
- 树形结构优化:只比较同层级节点,不跨层级对比
- 时间复杂度:从 O(n³) 优化到 O(n) 的关键策略
- 实现方式:
function updateChildren(parentElm, oldCh, newCh) { // 仅同层级比较 let oldStartIdx = 0 let newStartIdx = 0 // ...双指针逻辑 }
2. 双端比较算法
- 四指针策略:同时从新旧子节点数组的两端向中间扫描
- 比较顺序: