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

作者：前端开发爱好者

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

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

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

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

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

什么是 Vapor Mode？

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

xml 复制代码

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

官方给出的数字：

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

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

✅ 推荐这样做

❌ 暂时别这样

旧代码要改多少？
不用改！只要 <script setup> 加 vapor。Options API 用户请原地踏步。
自定义指令怎么办？
新接口更简单：接收一个响应式 getter，返回清理函数即可。官方已给出 codemod，一键迁移。
还能不能用 Element Plus / Ant Design Vue？
可以，但需加 vaporInteropPlugin。目前仅限标准 props、事件、插槽，复杂组件可能有坑。
TypeScript 支持如何？
完全保持现有类型推导，新增 VaporComponent 类型已同步到 @vue/runtime-core。
和 React Forget、Angular Signal 比谁快？
基准测试在同一梯队，但 Vue 的迁移成本最低------同一份代码，加个属性就提速。

javascript 复制代码

import { createVaporApp } from 'vue'
import App from './App.vue'

createVaporApp(App).mount('#app')

javascript 复制代码

import { createApp, vaporInteropPlugin } from 'vue'
import App from './App.vue'

createApp(App)
  .use(vaporInteropPlugin)
  .mount('#app')

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

xml 复制代码

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

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

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

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

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

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

v3.6.0-alpha.1 相关文档 ：https://github.com/vuejs/core/releases/tag/v3.6.0-alpha.1