diff 算法

---

• 原则
  • 同层比较: 只比较同一层级的节点
  • 相同节点的比较: 判断相同的依据是 key 和 tag 是否相同, key 是否相同决定了节点是否能复用, 否则创建新节点
  • 最小化 DOM 操作: 通过比对新旧 虚拟 DOM 树, 只更新有变化的节点, 避免不必要的 DOM 操作
• 双端对比算法: 从新旧节点的头尾开始进行比较
  • 比较新旧头节点：首先比较新旧 Virtual DOM 树的头节点。如果头节点相同，则进行 patch 操作（更新节点），继续比较下一个头节点。
  • 比较新旧尾节点：如果头节点不相同，则比较尾节点。如果尾节点相同，进行 patch 操作，并继续比较下一个尾节点。
  • 比较新头和旧尾：如果头尾都不相同，Vue 会比较新头节点和旧尾节点。如果它们相同，则进行 patch 操作，并将旧尾节点移动到头部。
  • 比较新尾和旧头：如果以上都不匹配，Vue 会比较新尾节点和旧头节点。如果匹配，则进行 patch，并将旧头节点移动到尾部。
  • 创建或删除节点：如果经过上述步骤仍未找到匹配的节点，Vue 会判断节点是新增还是删除，从而进行相应的 DOM 操作。