虚拟 DOM
虚拟 DOM 是用普通 JS 对象描述页面结构的技术：{ tag: 'ul', props: {...}, children: [...] } 对应一个真实节点。工作流程：数据变化 → 生成新的虚拟 DOM 树 → 新旧两棵树对比（diff）→ 只把有差异的部分更新到真实 DOM。
为什么要这么做？直接操作真实 DOM 是浏览器里最昂贵的操作（涉及重排重绘）。而 JS 对象的操作发生在内存里，速度极快。虚拟 DOM 的本质是「用大量廉价的 JS 计算，换取少量昂贵的 DOM 操作」。对比出最小差异后再更新，避免整个区域重新渲染。
下面的示例用 20 行代码实现了一个极简版虚拟 DOM 与渲染函数，跑起来你就明白：虚拟 DOM 没有魔法，只是「对象描述 + 递归渲染」。顺带一提，Svelte 和 Solid 选择了无虚拟 DOM 的编译方案，理念不同但目标一致——少碰真实 DOM。
本节要点虚拟 DOM = JS 对象描述页面；流程：生成新树 → diff 对比 → 最小化更新真实 DOM；用内存计算换 DOM 开销。
JavaScript
// 用普通对象描述 DOM 结构，这就是"虚拟 DOM" const vdom = { tag: 'ul', props: { id: 'list' }, children: [ { tag: 'li', props: {}, children: ['苹果'] }, { tag: 'li', props: {}, children: ['香蕉'] }, ], }; // 极简渲染函数：递归把虚拟 DOM 变成真实 DOM function render(node) { if (typeof node === 'string') { return document.createTextNode(node); // 文本节点 } const el = document.createElement(node.tag); for (const key in node.props) { el.setAttribute(key, node.props[key]); } node.children.map(render).forEach((child) => el.append(child)); return el; } document.body.append(render(vdom)); console.log('虚拟 DOM 本质：JS 对象 + diff + 按需更新');
