Vue 3.6 RC 发布！下一代渲染模式曝光！附 Vapor Mode 快速"上手指南"！
认真努力的小四子约 3 分钟Vue 3.6 要来了！近日，Vue 官方正式发布：v3.6.0-rc.1
这意味着 Vue 3.6 正式进入 RC（Release Candidate）阶段。
官方表示：Vue 3.6 已经完成 Vapor Mode 的预期功能开发。
这一次更新，最值得关注的两个方向：
Vapor Mode全新 @vue/reactivity响应式系统重构
Vue 正在探索下一代渲染架构。
Vapor Mode：Vue 下一代编译模式
过去 Vue 的核心渲染流程：
Template → Compiler → Virtual DOM → Diff → DOM Update
Virtual DOM 一直是 Vue 的核心设计。
但随着应用规模越来越大，运行时开销和 bundle size 也成为性能优化的重要方向。
因此 Vue 3.6 带来了：**Vapor Mode**
什么是 Vapor Mode？
官方定义：
Vapor Mode是 Vue Single-File Components（SFC）的一种新的编译模式，目标是减少基础bundle size并提升性能。
简单理解：
传统 Vue：
Vue Template → Render Function → Virtual DOM Runtime → DOM
开启 Vapor 后：
Vue Template → Vapor Compiler → DOM Update
通过新的编译路径，减少部分 Virtual DOM 运行时成本。
官方表示：
Vapor Mode 在第三方 benchmark 中：已达到与 Solid 和 Svelte 5 相同水平的性能表现。
如何开启 Vapor Mode？
Vapor Mode 最大特点：
100% Opt-in
不会影响现有 Vue 项目。
开发者可以根据场景选择开启。
方式一：<script setup vapor>
<script setup vapor>
</script>
<template>
<div>
Hello Vapor
</div>
</template>
方式二：<script vapor>
这是：
<script setup vapor>
的简写形式。
方式三：template vapor
也可以直接：
<template vapor>
<div>
Hello Vapor
</div>
</template>
整个 SFC 会使用 Vapor 编译模式。
Vapor 可以和普通 Vue 共存
Vue 3.6 支持渐进式迁移。
比如：
普通业务页面继续使用 VDOM性能敏感页面使用 Vapor
两种组件可以同时存在。
如果整个应用全部使用 Vapor Component：
Vue 提供：
import { createVaporApp } from'vue'
import App from'./App.vue'
createVaporApp(App)
.mount('#app')
相比普通：
createApp(App)
纯 Vapor 应用不会加载 Virtual DOM Runtime。
因此可以进一步降低基础包体积。
普通 Vue 项目如何接入？
如果项目继续使用：
createApp(App)
想使用 Vapor Component，需要安装：
import {
createApp,
vaporInteropPlugin
} from'vue'
createApp(App)
.use(vaporInteropPlugin)
.mount('#app')
开启后：Vapor Component和VDOM Component可以互相嵌套。
目前支持：
propseventsslots
不过官方提醒：
使用基于 VDOM 的组件库时，仍可能存在一些边界问题。
第二个重点：响应式系统重构
除了 Vapor Mode。
Vue 3.6 还带来了：
全新的 @vue/reactivity 实现。
官方表示：
新的响应式系统基于：alien-signals进行了重大重构。
主要优化：
更高性能 更低内存占用
这会影响 Vue 最核心的数据更新机制。
Vapor Mode 当前限制
由于 Vapor 使用新的编译模式，目前只支持 Vue 的部分能力。
以下功能暂不支持：
Options API
例如：
exportdefault {
data() {}
}
app.config.globalProperties
不支持全局属性注入。
getCurrentInstance()
在 Vapor Component 中：
getCurrentInstance()
会返回：
null
v-memo
不支持。
Template refs
不会暴露：
$el、$props、$attrs、 、$slots、$refs
Vue 3.6 的意义
Vue 3.6 带来的变化：
Vue 3→ Virtual DOM→ Vapor Mode→ Compiler Optimization
Vue 并没有要求开发者立即迁移。
而是提供了一条新的路线：
在已有项目中逐步尝试 Vapor Mode，让性能敏感场景获得更轻量的运行体验。
从 Vue 3.0 到 Vue 3.6：
Vue 一直在优化开发体验。
而 Vapor Mode，代表 Vue 开始向：
更轻运行时、更强编译优化、更高性能渲染 方向继续探索。