编程 Vue 3.6 RC 里的 Vapor Mode:在现有 VDOM 应用里局部启用,哪些 API 用不了

2026-09-24 21:13:14

Vue 3.6 RC 里的 Vapor Mode:在现有 VDOM 应用里局部启用,哪些 API 用不了

Vue 3.6.0-rc.1 于 2026-07-18 发布,Release notes:vuejs/core v3.6.0-rc.1

官方对该版本的说明是:Vapor Mode 的目标特性集已完成,3.6 进入 RC 阶段;同时 3.6 包含一次基于 alien-signals 的 @vue/reactivity 大重构,显著改善响应式系统的性能与内存占用。

Vapor Mode 是什么

Vapor Mode 是面向 Vue 单文件组件(SFC)的新编译模式,目标是降低基线包体积并提升性能。它 100% 按需开启(opt-in),只支持现有 Vue API 的一个子集,行为大体一致。

依赖 VNode 或组件公共实例代理(component public instance proxy)的能力,在 Vapor 组件中不可用。官方称 Vapor Mode 在第三方 benchmark 中已经达到与 Solid、Svelte 5 同一水平的性能。

3.6 RC 阶段推荐的用法有两种:

  • 在现有应用里局部使用,把对性能敏感的页面切到 Vapor Mode;
  • 用 Vapor Mode 完整构建小型新应用。

怎么开启

Vapor Mode 支持纯模板 SFC,以及使用 `` 的 SFC;不支持 Options API。


// ...

的简写。vapor 标记也可以放在 template 上:``。

应用创建与 vaporInteropPlugin

纯 Vapor 应用使用 createVaporApp() 创建。如果应用是用 createApp 创建的 VDOM 应用,要在其中使用 Vapor 组件,需要安装 vaporInteropPlugin

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

createApp(App)
.use(vaporInteropPlugin) // enable vapor interop
.mount('#app')

反向也成立:Vapor 应用实例可以安装 vaporInteropPlugin 来在内部使用 VDOM 组件,但这会把 VDOM 运行时拉进来,抵消掉包体积变小的收益。

VDOM 互操作的限制

安装互操作插件后,Vapor 组件与非 Vapor 组件可以相互嵌套。目前覆盖标准 props、事件和插槽用法,但尚未考虑所有边缘情况。官方建议在应用里划分明确的「区域」,一块是 Vapor、一块是 VDOM,尽量避免混合嵌套。

Vapor 中的自定义指令接口与 VDOM 不同,对应 VaporDirective

不支持的 API

第三方分析(wimantis.ninja,2026 年 7 月)指出:Vapor Mode 要求使用 Composition API,并且有一批进阶 API 尚不支持——getCurrentInstance()v-memo、元素生命周期事件、全局属性。

同一篇分析给出的数据是:挂载 100,000 个组件从约 300ms 降到约 100ms;复杂重渲染期间的峰值内存下降约 22%;纯 Vapor 应用的包体积缩小 20–50%。这些均为第三方数据,需自行验证。

netguide.io 在 2026-09-14 的报道中提到,rc.8 已于 2026 年 9 月 11 日发布,把 Vapor Mode 推向收尾阶段。

Suspense 与 SSR 相关现状

Vapor-only 模式不支持 Suspense,但可以在 VDOM 的 Suspense 内部渲染 Vapor 组件(来自 beta.1 的说明)。

服务端渲染(SSR)方面的具体支持状态,在 3.6 RC 阶段需自行验证。

复制全文 生成海报 Vue 前端 编译 响应式

推荐文章

程序员茄子在线接单