VDom好？还是去VDom好？Vue3.6给出了标准答案

本公众号会持续更新技术干货，感谢大家支持，欢迎点赞、评论、留言。

图为尤大在VueConf上的rapper表演，不得不说，尤大不但会的太多了，还会唱、跳、打......代码，实在是太强了。

刚过去的VueConf2025上，尤大和他的团队带来了很多关于Vue和Vite的重磅更新。其中最让人振奋的还是直接发布了Vue3.6.0-alpha.1版本。这是一次划时代意义的更新，新推出的Vapor Mode标志着Vue进入了无VDom的时代。

Vapor Mode 是什么

还是熟悉的单文件组件（SFC），只不过现在多了一种模式让它可以编译成无虚拟Dom直接操作原始Dom的包，也就说它不在有虚拟Dom的运行时了。喊了几年的去VDom终于来了。

直接在SFC的script标签上加上vapor：<script setup vapor >就可以使用了

xml 复制代码

<script setup vapor>
  // 和以前一样的业务代码
</script>

除了加了属性之外没有任何添加剂，好用实惠，无过多心智负担（PS：我觉得这是长久以来vue做的比react好的地方👏🏻）

本次推出Vapor Mode并不是要否定虚拟Dom，毕竟虚拟Dom还是有它存在的价值的，不然的话3.6.0版本应该直接删掉它不是吗。推出vapor mode主要是为了解决在特定场景下的固有局限，同时保留Vue 的开发体验优势。我们看看它的特点：

跨平台与开发效率
- VDOM 抽象了真实 DOM，使 Vue 可跨平台渲染（Web、SSR、小程序等）
- 开发者无需手动操作 DOM，通过声明式模板或 JSX 描述 UI，提升开发效率
批量更新优化
- VDOM 的 Diff/Patch 机制可合并多次数据变更，减少直接操作 DOM 的频率，避免频繁重排/重绘

运行时性能开销
- 即使 Vue 3 通过静态提升、Patch Flags 等优化减少 Diff 范围，生成 VDOM 树和 Diff 计算仍需消耗 CPU 和内存资源，尤其在动态节点较多的场景下
- 第三方测试显示，传统 VDOM 的渲染耗时比原生 JS 操作高约 32%（1.32 vs 1.0）
体积与内存占用
- VDOM 运行时库（如 vue.runtime.esm-bundler.js）增加包体积（约 50KB），低端设备或网络环境可能影响加载速度
- 维护完整的 VDOM 树结构占用额外内存，静态内容多时存在冗余

而vapor的核心突破是：

彻底消除虚拟 DOM 开销
- 编译时生成 DOM 指令：模板直接编译为原生 DOM 操作代码（如 el.textContent = state.msg），跳过 VNode 创建、Diff、Patch 全流程，运行时仅执行精准绑定更新
- 响应式系统升级：移植自 alien-dom 的高效响应式核心，依赖追踪粒度细化到单个 DOM 绑定（而非组件级），数据变更时直接调用预编译的 DOM 指令
性能与体积的显著优化
- 编译时生成 DOM 指令 ：
  - Hello World 应用从 22.8KB → 7.9KB
  - 纯 Vapor 应用仅需轻量级运行时（约 6KB），接近原生 JS 项目的体积
- 性能提升 ：
  - 首屏渲染提速 44%，高频更新帧率提升 33%，内存占用降低 29--42%
  - 尤雨溪演示案例：100 毫秒挂载 10 万个组件
- 基准测试对标 Solid/Svelte：在第三方测试中与 SolidJS、Svelte 5 性能接近，部分场景反超

给一个表格看一下直观一些：

alpha阶段一般是不推荐直接上生产的，非要用的话

Vue十年出头了，我第一次接触的前端框架就是Vue，那个时候还是JQ的时代，Vue把我从Dom操作中拉到了数据驱动模式下，这么多年，虽然混迹各种公司，什么技术都用过，但是说实话，我还是更喜欢Vue一些。所见即所得，无过多心智负担，开发起来舒服、丝滑~