虚拟 DOM 是 Vue.js 渲染机制的核心，它不是真实页面上的 DOM 元素，而是一个用 JavaScript 对象模拟的、轻量级的 DOM 结构副本。
虚拟 DOM 本质：一棵 JS 对象树
当你写一个 Vue 组件模板，比如：
<div class="box">
<h2>{{ title }}</h2>
<p>共 {{ list.length }} 条数据</p>
</div>Vue 在内部不会立刻操作浏览器 DOM，而是生成一个结构清晰的 JS 对象（VNode），长这样：
{
tag: 'div',
data: {
class: 'box'
},
children: [{
tag: 'h2',
text: 'Hello Vue'
},
{
tag: 'p',
text: '共 3 条数据'
}
]
}这个对象就是虚拟 DOM 节点（VNode），它描述了“应该渲染成什么样”，但不触发真实绘制。
为什么不用直接操作真实 DOM？
浏览器中每次修改真实 DOM 都可能触发重排（reflow）和重绘（repaint），开销大、性能差。尤其在频繁更新（如输入框实时响应、列表滚动）时，直接操作容易卡顿。
真实 DOM 操作是“昂贵”的 —— 浏览器要解析、布局、绘制、合成
虚拟 DOM 操作是“廉价”的 —— 就是 JS 对象的增删改，CPU 轻松搞定
Vue 把多次状态变化攒在一起，只做一次“最小化更新”，再批量同步到真实 DOM
Vue 怎么用虚拟 DOM 更新页面？三步走
Vue 的响应式系统 + 虚拟 DOM + Diff 算法，共同完成高效更新：
响应式追踪：data 中的数据被 Proxy 或 Object.defineProperty 劫持，一旦变化就通知对应组件
重新生成 VNode：组件重新执行 render 函数，产出一棵新的虚拟 DOM 树
Diff + Patch：Vue 对比新旧两棵 VNode 树（叫“patch”过程），找出差异节点，只更新真实 DOM 中真正变化的部分
比如只改了 title，Vue 就只替换 <h2> 里的文本，不会动 <p> 或重新创建整个 <div>。
虚拟 DOM 不是 Vue 独有，但 Vue 做得更聪明
React 也用虚拟 DOM，但 Vue 在设计上做了几处关键优化：
模板编译阶段就静态分析，把不变化的节点标记为“静态”，Diff 时直接跳过
对常见场景（如列表 key、表单控件）做了专门优化，比如 v-for 必须用 key，就是为了提升 Diff 准确性
支持编译时预编译模板为高效 render 函数（尤雨溪说：“模板是 DSL，不是字符串”）
所以你写的模板，最终跑的是高度优化过的 JS 逻辑，不是慢吞吞地拼 HTML 字符串。
标签： Vue.js javascript
还木有评论哦，快来抢沙发吧~