Vue 的虚拟 DOM 是如何提升渲染性能的？

1. 虚拟 DOM 的基本概念

虚拟 DOM（Virtual DOM）是用轻量 JavaScript 对象模拟真实 DOM 树的结构。每个虚拟节点记录标签名、属性和子节点等信息。当数据变化需要更新视图时，Vue 先在虚拟 DOM 层面对比新旧两棵树的差异（diff），计算出最小变更，再一次性应用到真实 DOM 上，避免频繁、直接的真实 DOM 操作。

2. Diff 算法与最小化更新

Vue 的 diff 算法通过同层比较、key 标识列表项等手段，尽可能复用已有节点，只更新发生变化的部分。在列表渲染中，为每个列表项设置稳定的 key，能帮助 Vue 准确识别哪些项发生了移动、新增或删除，从而做出最优的节点复用与重排，减少不必要的销毁与重建。

3. 编译优化

Vue 3 的模板编译器在编译阶段做了大量静态分析和优化，例如标记静态节点、识别动态绑定，使运行时的 diff 只需比对真正会变化的动态部分，大幅缩小比较范围。这些编译时优化与虚拟 DOM 的运行时 diff 相结合，共同提升了渲染效率。