虚拟 DOM
定义用 JS 对象模拟 DOM 树、经 diff 计算最小更新再批量提交的渲染优化机制
虚拟 DOM 是在内存中用普通对象描述页面结构，状态变化时生成新树与旧树对比（diff），只把差异部分应用到真实 DOM。它解决了「频繁整树操作真实 DOM」的性能问题，也让开发者用声明式思维写 UI。
要澄清一个常见误解：虚拟 DOM 不一定比手工优化快——它的价值在于「保证可接受性能下限的同时，把开发者从手动 DOM 操作中解放出来」。框架层面还有编译期优化（Vue 的静态提升、React 的 Fiber 架构）等更深手段。
- key 是 diff 的「身份证」，列表渲染必须给稳定 key；
- 用 index 作 key 在重排/增删时会错位；
- Svelte 不用虚拟 DOM，靠编译期精准更新——路线之争仍在继续。
JavaScript
// 虚拟 DOM 长这样（JS 对象） const vnode = { tag: 'div', props: { class: 'card' }, children: [ { tag: 'h2', children: '标题' }, { tag: 'p', children: '内容' } ] }; // 框架 diff 新旧 vnode 树，只 patch 变化的节点
⚠ 常见误区
- 列表 key 用 index 是新手最常踩的 diff 坑
- 虚拟 DOM 不是银弹，超大数据量仍可能卡顿
- 别在 render 里创建新对象/函数，会打断 memo 优化