虚拟DOM是前端框架中用来描述真实DOM结构的JavaScript对象，它可以避免直接操作真实DOM带来的性能损耗。当组件状态发生变化时，框架会先生成新的虚拟DOM树，再通过Diff算法对比新旧两棵虚拟DOM树的差异，最后只把差异部分更新到真实DOM上。
什么是虚拟DOM
真实DOM是浏览器提供的接口，操作真实DOM会触发浏览器的重排和重绘，频繁操作会严重影响页面性能。虚拟DOM就是对真实DOM的抽象描述，本质是一个普通的JS对象，包含了真实DOM的标签名、属性、子节点等信息。
比如下面这段真实DOM：
<div class="container"> <p>文本内容</p> <span>子节点</span> </div>
对应的虚拟DOM对象结构如下：
const vdom = {
tag: 'div',
props: {
class: 'container'
},
children: [
{
tag: 'p',
props: {},
children: '文本内容'
},
{
tag: 'span',
props: {},
children: '子节点'
}
]
}
为什么需要虚拟DOM
直接操作真实DOM的性能成本很高，而虚拟DOM的优势主要体现在两个方面：
- 减少真实DOM操作次数：通过Diff算法计算出最小变更，只更新需要修改的部分
- 跨平台能力：虚拟DOM是JS对象，不依赖浏览器环境，可以用于服务端渲染、小程序等场景
虚拟DOM的Diff算法核心逻辑
Diff算法的作用是对比新旧虚拟DOM树的差异，主流框架的Diff算法都遵循同层比较的原则，不会跨层级对比节点，这样可以把时间复杂度从O(n^3)降到O(n)。
同层比较规则
Diff算法会从根节点开始，逐层对比新旧虚拟DOM树的同一层级的节点，如果发现节点类型不同，会直接销毁旧节点及其所有子节点，然后创建新节点插入到真实DOM中。
比如旧节点是<div>，新节点是<p>，那么旧节点会被直接替换，不会再去对比两者的子节点。
节点复用与属性更新
如果同一层级的节点类型相同，Diff算法会复用该节点，只更新节点的属性差异。比如节点的class属性发生了变化，只会修改真实DOM的class属性，不会重新创建节点。
下面是一个属性更新的简单示例：
// 旧虚拟DOM节点
const oldVNode = {
tag: 'div',
props: { class: 'old-class', id: 'box' },
children: '旧内容'
}
// 新虚拟DOM节点
const newVNode = {
tag: 'div',
props: { class: 'new-class', id: 'box' },
children: '新内容'
}
// Diff处理属性差异时，会对比props
// 发现class不同，更新真实DOM的class为new-class
// id相同则不做修改
// 再对比children，更新文本内容为新内容
子节点对比策略
当节点包含多个子节点时，Diff算法会采用不同的策略对比子节点列表：
- 如果子节点是单个文本节点，直接对比文本内容，不同则更新
- 如果子节点是列表，会结合key值来优化对比过程
key的作用
在列表渲染时，给每个子节点添加唯一的key值，可以帮助Diff算法快速识别节点的身份，避免不必要的节点销毁和重建。
如果没有key，Diff算法会按照顺序逐个对比子节点，比如旧列表是[A,B,C]，新列表是[B,A,C]，会认为第一个节点从A变成了B，第二个从B变成了A，导致两个节点都被重新创建。如果给每个节点加了唯一key，算法就能识别出B和A只是位置交换了，只需要移动节点即可。
下面是一个带key的列表Diff示例：
// 旧子节点列表，每个节点带唯一key
const oldChildren = [
{ tag: 'li', key: 'a', children: '项目A' },
{ tag: 'li', key: 'b', children: '项目B' },
{ tag: 'li', key: 'c', children: '项目C' }
]
// 新子节点列表，顺序调整
const newChildren = [
{ tag: 'li', key: 'b', children: '项目B' },
{ tag: 'li', key: 'a', children: '项目A' },
{ tag: 'li', key: 'c', children: '项目C' }
]
// Diff算法通过key识别到b和a只是位置变化
// 只会移动真实DOM中对应li节点的位置，不会重新创建节点
Diff算法的局限性
虽然Diff算法已经做了很多优化，但也不是万能的：
- 列表渲染时如果key使用索引，在列表插入、删除元素时可能会导致节点复用错误，引发状态异常
- 跨层级的节点移动无法被识别，会被当作旧节点销毁、新节点创建处理
- 如果组件状态变化导致整个虚拟DOM树变动很大，Diff算法的计算成本也会上升
总结
虚拟DOM通过JS对象抽象真实DOM，减少直接操作真实DOM的性能损耗，而Diff算法是虚拟DOM更新的核心，通过同层比较、节点复用、key优化等策略，计算出最小的DOM变更，提升页面渲染性能。理解虚拟DOM和Diff算法的工作原理，可以帮助开发者写出更高效的组件代码，避免不必要的性能问题。