虚拟 DOM 的核心是延迟决策、精准变更、批量执行：用轻量 vnode 描述 UI，同层比对+key 复用+双端匹配，合并更新、直接操作真实 DOM 实现高效复用。

虚拟 DOM 的设计模式核心在于“延迟决策、精准变更、批量执行”——它不追求立刻改 DOM，而是先在内存里算清楚“到底要动哪几笔”，再一次性落笔。

用轻量 JS 对象描述 UI 结构

把真实 DOM 节点抽象成普通 JavaScript 对象（如 { tag: 'div', props: { id: 'app' }, children: [...] }），这个对象就是 vnode。它不含任何浏览器 API，纯数据，创建快、比对快、丢弃也快。模板编译或 JSX 编译后，最终都产出这类结构。关键不是“多像 DOM”，而是“足够表达渲染意图”。

只比对变化的层级与路径

Diff 过程不跨层、不穷举，而是按策略聚焦：

• 同层比较：只对比新旧 vnode 的同一级子节点，父节点类型不同就整棵替换，不往下深挖
• 双端优先匹配（Vue）：用新前/旧前、新后/旧后四组指针快速复用头尾稳定节点
• Key 驱动复用：列表项必须设唯一 key（如 ID），避免用索引；key 相同才认为是同一个逻辑节点，可复用 DOM 元素和内部状态

把更新动作攒起来，一次刷到底

真实 DOM 操作不是随数据变就立刻执行，而是在合适的时机批量提交：

• 事件循环空闲时（requestIdleCallback）或下一帧前（queueMicrotask）触发 patch
• 同一轮响应中多次数据修改，合并为一次虚拟树比对（React 的 setState 批量、Vue 的 nextTick 延迟更新）
• 更新时直接操作真实 DOM 节点（如 node.textContent = newValue），不生成中间 patch 描述对象，省掉一次遍历

让 DOM 复用成为默认行为

更新不是“删了重建”，而是“能留则留、能移则移、能改则改”：

• 属性变化只更新 diff 出的差异字段（如仅改 style.color，不重设整个 style 对象）
• 文本节点内容不同就直接赋值 textContent，不重建元素
• 子节点顺序调整时，通过移动已有 DOM 节点实现，而非删除再插入