虚拟 DOM 是一个用 JavaScript 描述的“假 DOM 树”，它帮助框架（如 React、Vue）更快、更高效地更新页面，只更新必要的部分，避免不必要的 DOM 操作。
通俗来说：【真实DOM的影子副本，保存在内存中】
🔍 为什么需要虚拟 DOM？
真实 DOM 有什么问题？
- 真实 DOM（浏览器的 UI 结构）操作很慢。
- 每次更新页面，操作真实 DOM 都会导致重排（reflow）和重绘（repaint） ，性能开销大。 点击了解重排&重绘
虚拟 DOM 的优点：
- 把 UI 先用 JS 对象描述出来（内存中构建虚拟树）；
- 当数据变化时，先生成新的虚拟 DOM；
- 用diff 算法比较“新旧虚拟 DOM”的差异；
- 最后只更新变化的部分到真实 DOM → 大幅减少操作次数、提高性能。
数据变了
↓
React/Vue 重新构建虚拟 DOM
↓
与旧的虚拟 DOM 比较（diff）
↓
找出需要更新的地方
↓
只更新真实 DOM 中对应的部分
🧪 举个例子（React）
const [count, setCount] = useState(0);
return <div>{count}</div>;
- 页面初次渲染：构建虚拟 DOM，变成
{ type: 'div', children: ['0'] }； - 用户点击按钮更新 count = 1；
- React 创建新的虚拟 DOM：
{ type: 'div', children: ['1'] }； - React 比较新旧：只发现
'0' → '1'变了； - React 更新真实 DOM 中
<div>的内容，而不是整个重新渲染。
