Vue 3.6 将正式进入「无虚拟 DOM」时代！

“干掉虚拟 DOM” 的口号喊了好几年，现在 Vue 终于动手了。

就在前天，Vue 3.6 alpha 带着 Vapor Mode 低调上线：编译期直接把模板编译成精准 DOM 操作，不写 VNode、不 diff，包更小、跑得更快。

不同于社区实验，Vapor Mode 是 Vue 官方给出的「标准答案」：

• 依旧是熟悉的单文件组件，只是 <script setup> 上加一个 vapor 开关；
• 依旧是响应式系统，但运行时不再生成 VNode，编译期直接把模板转换成精准的原生 DOM 操作；
• 与 Svelte、Solid 的最新基准横向对比，性能曲线几乎重合，首屏 JS 体积却再降 60%。

换句话说，Vue 没有「另起炉灶」，而是让开发者用同一套心智模型，一键切换到「无虚拟 DOM」的快车道。

接下来 5 分钟，带你一次看懂 Vapor Mode 的底层逻辑、迁移姿势和未来路线图。

什么是 Vapor Mode？

一句话总结：把虚拟 DOM 编译掉，组件直接操作真实 DOM，包体更小、跑得更快。

• 100% 可选，旧代码无痛共存。
• 仅支持 <script setup> 的 SFC，加一个 vapor 开关即可。
• 与 Solid、Svelte 5 在第三方基准测试里打平，甚至局部领先。

html

体验AI代码助手

代码解读

复制代码

<script setup vapor> // 你的组件逻辑无需改动 </script>

性能有多夸张？

官方给出的数字：

场景	传统 VDOM	Vapor Mode
Hello World 包体积	22.8 kB	7.9 kB ⬇️ 65%
复杂列表 diff	1×	0.6× ⬇️ 40%
内存峰值	100%	58% ⬇️ 42%

一句话：首屏 JS 少了三分之二，运行时内存直接腰斩。

能不能直接上生产？

alpha 阶段，官方给出“三用三不用”原则：

✅ 推荐这样做

• 局部替换：把首页、营销页等性能敏感模块切到 Vapor。
• 新项目：脚手架直接 createVaporApp，享受极简 bundle。
• 内部尝鲜：提 Issue、跑测试、贡献 PR，帮社区踩坑。

❌ 暂时别这样

• 现有组件整体迁移（API 未 100% 对标）。
• 依赖 Nuxt、Transition、KeepAlive 的项目(还在支持的路上)。
• 深度嵌套第三方 VDOM 组件库（边界 case 仍可能翻车）。

开发者最关心的 5 个问题

• 旧代码要改多少？
  不用改！只要 <script setup> 加 vapor。Options API 用户请原地踏步。

• 自定义指令怎么办？
  新接口更简单：接收一个响应式 getter，返回清理函数即可。官方已给出 codemod，一键迁移。

• 还能不能用 Element Plus / Ant Design Vue？
  可以，但需加 vaporInteropPlugin。目前仅限标准 props、事件、插槽，复杂组件可能有坑。

• TypeScript 支持如何？
  完全保持现有类型推导，新增 VaporComponent 类型已同步到 @vue/runtime-core。

• 和 React Forget、Angular Signal 比谁快？
  基准测试在同一梯队，但 Vue 的迁移成本最低——同一份代码，加个属性就提速。

一行代码，立刻体验

• 纯 Vapor 应用（最小体积）

js

体验AI代码助手

代码解读

复制代码

import { createVaporApp } from 'vue' import App from './App.vue' createVaporApp(App).mount('#app')

• 在现有 Vue 项目中混合使用

js

体验AI代码助手

代码解读

复制代码

import { createApp, vaporInteropPlugin } from 'vue' import App from './App.vue' createApp(App) .use(vaporInteropPlugin) .mount('#app')

使用时只需在单文件组件的 <script setup> 标签上加 vapor 属性即可启用新模式。

html

体验AI代码助手

代码解读

复制代码

<script setup vapor> // 你的组件逻辑无需改动 </script>

打开浏览器，Network 面板里 app.js 只有 8 kB，简直离谱。

写在最后

从 2014 年的响应式系统，到 2020 的 Composition API，再到 2025 的 Vapor Mode，Vue 每一次大版本都在**“把复杂留给自己，把简单留给开发者”**。

这一次，尤大不仅把虚拟 DOM 编译没了，还把“性能焦虑”一起编译掉了。

领先的不只是速度，还有对开发者体验的极致尊重。

Vue 3.6 正式版预计 Q3 发布，现在开始试 alpha，刚刚好。

原文：https://juejin.cn/post/7526383867101937718