虚拟DOM通过JavaScript对象模拟真实DOM，利用Diff算法比较新旧VNode差异并最小化更新真实DOM；VNode包含tag、props、children、text和key属性，Diff时先判断tag是否相同，不同则替换节点，相同则复用并递归对比属性与子节点，子节点通过key高效匹配增删移动。
虚拟DOM（Virtual DOM）是现代前端框架中提升渲染性能的核心技术之一。其核心思想是通过在内存中构建一个轻量级的JavaScript对象树来模拟真实DOM结构，在状态变更时，先对比新旧虚拟DOM树的差异（即Diff算法），再将变化最小化地应用到真实DOM上，从而减少昂贵的DOM操作。
虚拟DOM节点结构设计
要实现Diff算法，首先要定义虚拟DOM节点（VNode）的基本结构。每个VNode通常包含以下关键属性：
- tag：标签名，如 'div'、'span'
- props：节点属性对象，如 { id: 'app', className: 'container' }
- children：子节点数组，每个子节点也是VNode
- text：如果是文本节点，保存文本内容
- key：用于标识节点的唯一键，提高Diff效率
function h(tag, props, children, text) {
return {
tag,
props,
children: Array.isArray(children) ? children : [],
text
};
}
// 创建一个虚拟节点
const vnode = h('div', { id: 'app' }, [
h('p', null, [], 'Hello Virtual DOM')
]);
Diff算法核心逻辑
Diff的目标是比较两个VNode（旧的和新的），找出差异并更新真实DOM。通常采用同层比较策略，即只对同一层级的节点进行对比，不跨层级移动。
主要判断流程如下：
立即学习“Java免费学习笔记（深入）”；
ASP.NET 4.0电子商城
下载
在现实生活中的购物过程，购物者需要先到商场，找到指定的产品柜台下，查看产品实体以及标价信息，如果产品合适，就将该产品放到购物车中，到收款处付款结算。电子商务网站通过虚拟网页的形式在计算机上摸拟了整个过程，首先电子商务设计人员将产品信息分类显示在网页上，用户查看网页上的产品信息，当用户看到了中意的产品后，可以将该产品添加到购物车，最后使用网上支付工具进行结算，而货物将由公司通过快递等方式发送给购物者
- 如果新旧节点tag不同，直接替换整个节点
- 如果都是文本节点且内容不同，更新文本
- 如果标签相同，复用节点，递归比较属性和子节点
子节点比较是最复杂的部分。为了高效处理节点的增删移动，引入key属性进行映射匹配。以下是简化版Diff子节点逻辑：
function diffChildren(parentEl, oldChildren, newChildren) {
const oldLen = oldChildren.length;
const newLen = newChildren.length;
const maxLength = Math.max(oldLen, newLen);
for (let i = 0; i < maxLength; i++) {
const oldChild = oldChildren[i];
const newChild = newChildren[i];
// 节点新增
if (!oldChild && newChild) {
mountElement(newChild, parentEl);
}
// 节点删除
else if (oldChild && !newChild) {
parentEl.removeChild(parentEl.childNodes[i]);
}
// 节点更新
else if (oldChild && newChild) {
diff(oldChild, newChild, parentEl.childNodes[i]);
}
}
}
打补丁（Patch）更新真实DOM
Diff完成后，需要将差异“打补丁”到真实DOM。patch函数负责具体DOM操作：
- 创建新元素并插入
- 更新或移除属性
- 递归处理子节点
function patch(el, oldVNode, newVNode) {
if (!oldVNode) {
// 挂载新节点
mountElement(newVNode, el);
} else if (!newVNode) {
// 删除节点
el.removeChild(el);
} else if (newVNode.tag !== oldVNode.tag) {
// 标签不同，替换
el.parentNode.replaceChild(createElement(newVNode), el);
} else {
// 相同标签，更新属性与子节点
const newEl = el;
diffProps(newEl, oldVNode.props, newVNode.props);
diffChildren(newEl, oldVNode.children, newVNode.children);
}
}
基本上就这些。一个简化的虚拟DOM Diff实现并不复杂，但足以体现其核心思想：通过JS对象对比减少真实DOM操作，结合key优化列表更新。实际框架中的实现会更精细，比如React使用Fiber架构支持异步可中断的Diff，但基础原理一致。
