虚拟DOM标签级diff比对优化过程详解

• 旧列表：[{tag:'li', key:'a', text:'苹果'}, {tag:'li', key:'b', text:'香蕉'}]
• 新列表：[{tag:'li', key:'b', text:'香蕉'}, {tag:'li', key:'a', text:'苹果'}]
• diff 发现 key 'b' 和 'a' 都存在，只是顺序调换 → 只需移动 DOM 节点，不销毁重建。
• 没有 key 时，diff 只能按索引硬匹配：第一个 vs 第一个、第二个 vs 第二个 → 顺序一变就误判为“全删全建”。

标签内属性更新走细粒度 patch

一旦确认是同一节点（标签名 + key 相同），diff 就不再新建节点，而是就地更新：

• 对比 class、style、事件监听器等属性差异，只操作真实 DOM 中变动的部分。
• 文本节点变化？直接改 node.textContent。
• class 从 "btn" 变成 "btn active"？只增补 classList，不重写整个 className。
• 这种“打补丁式”更新，避免了重新创建元素、重新绑定事件、重新计算样式带来的开销。

空 children 或文本节点直接短路

遇到简单结构，diff 会跳过子节点遍历：

• 旧节点有 children 数组，新节点是纯文本（text: 'hello'）→ 清空旧 children，设 textContent。
• 新旧节点都无 children，且都是文本节点 → 直接比对 text 字符串，不同则更新 node.textContent。
• 任一节点 children 为空数组，另一方非空 → 直接批量卸载或挂载子节点，不逐个比对。