Vue框架的Diff算法

以下是关于 Diff 算法 的系统梳理：

---

一、Diff 算法的核心目标

1. 最小化 DOM 操作：通过虚拟 DOM 对比，找出真实 DOM 的最小变更集
2. 高效节点复用：尽可能复用相同节点，减少创建/销毁开销
3. 顺序优化处理：优先处理高频变更场景（如列表尾部追加）
4. 保证渲染正确性：正确处理组件状态和 DOM 的对应关系

---

二、核心算法策略

1. 同级比较原则

• 树形结构优化：只比较同层级节点，不跨层级对比
• 时间复杂度：从 O(n³) 优化到 O(n) 的关键策略
• 实现方式：

  function updateChildren(parentElm, oldCh, newCh) {
       
    // 仅同层级比较
    let oldStartIdx = 0
    let newStartIdx = 0
    // ...双指针逻辑
  }
  

2. 双端比较算法

• 四指针策略：同时从新旧子节点数组的两端向中间扫描
• 比较顺序：