虚拟 dom 是 vue.js 用 javascript 对象模拟的轻量级 dom 结构副本，本质是一棵 js 对象树（vnode），用于描述渲染结果而不直接操作真实 dom；它通过响应式系统触发重新渲染、diff 算法比对新旧 vnode 树、patch 过程精准更新真实 dom，从而避免频繁重排重绘，提升性能。
虚拟 DOM 是 Vue.js 渲染机制的核心，它不是真实页面上的 DOM 元素，而是一个用 JavaScript 对象模拟的、轻量级的 DOM 结构副本。
虚拟 DOM 本质：一棵 JS 对象树
当你写一个 Vue 组件模板，比如：
```html{{ title }}
共 {{ list.length }} 条数据
```
Vue 在内部不会立刻操作浏览器 DOM，而是生成一个结构清晰的 JS 对象（VNode），长这样：
```js{
tag: 'div',
data: { class: 'box' },
children: [
{ tag: 'h2', text: 'Hello Vue' },
{ tag: 'p', text: '共 3 条数据' }
]
}
```
这个对象就是虚拟 DOM 节点（VNode），它描述了“应该渲染成什么样”，但不触发真实绘制。
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
为什么不用直接操作真实 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></h2> 里的文本，不会动 <p></p> 或重新创建整个 <div>。<h3>虚拟 DOM 不是 Vue 独有，但 Vue 做得更聪明</h3>
<p>React 也用虚拟 DOM，但 Vue 在设计上做了几处关键优化：</p>
<ul>
<li>模板编译阶段就静态分析，把不变化的节点标记为“静态”，Diff 时直接跳过</li>
<li>对常见场景（如列表 key、表单控件）做了专门优化，比如 <code>v-for 必须用 key，就是为了提升 Diff 准确性
所以你写的模板，最终跑的是高度优化过的 JS 逻辑，不是慢吞吞地拼 HTML 字符串。
