各位 Vue 开发者们，激动人心的时刻到了！Vue 3.6 正式进入 Beta 阶段，其中最受瞩目的 Vapor 模式 已经完成了路线图规划的所有功能，达到了与 Virtual DOM 模式所有稳定功能的特性对等！这意味着 Vue 的性能和包体积优化将迈向一个新的里程碑！
Vapor 模式：轻如“蒸汽”，快如闪电
Vapor 模式是 Vue 单文件组件 (SFC) 的全新编译模式，旨在显著减小基线包体积并提升性能。它是一个 100% 可选择加入的模式，支持现有 Vue API 的子集，且行为几乎完全一致。
划重点：
-
性能媲美 Solid 和 Svelte 5！ 在第三方基准测试中，Vapor 模式已展现出与 Solid 和 Svelte 5 同等水平的性能。
-
包体积显著减小！ 告别冗余代码，让你的应用更加轻量。
Reactivity 系统全面升级：基于 alien-signals 的飞跃
Vue 3.6 还对 @vue/reactivity 进行了重大重构，引入了基于 alien-signals 的全新实现。这意味着：
-
响应系统性能显著提升！ 更快的更新速度，更流畅的用户体验。
-
内存使用率大幅优化！ 减少内存占用，让你的应用运行更高效。
Vapor 模式：如何尝鲜？
虽然 Vapor 模式在 Vue 3.6 beta 中已功能完备，但仍处于不稳定阶段。我们建议在以下场景中使用：
-
现有应用中的部分使用： 例如，在 Vapor 模式中实现对性能敏感的子页面。
-
完全在 Vapor 模式下构建小型新应用。
如何开启 Vapor 模式？
Vapor 模式仅适用于使用 <script setup> 的单文件组件。只需在 <script setup> 中添加 vapor 属性即可：
<script setup vapor>
// ...
</script>
Vapor 模式组件可以在两种场景下使用：
-
在通过
createVaporApp创建的 Vapor 应用实例中： 这样创建的应用可以避免引入 Virtual DOM 运行时代码，从而大幅减小包体积。 -
在通过
createApp创建的 VDOM 应用实例中： 需要安装vaporInteropPlugin：import { createApp, vaporInteropPlugin } from 'vue' import App from './App.vue'
createApp(App) .use(vaporInteropPlugin) // 启用 vapor 互操作 .mount('#app')
重要提示： Vapor 应用实例也可以安装 vaporInteropPlugin 以允许使用 VDOM 组件，但这会引入 VDOM 运行时并抵消较小包体积的优势。
VDOM 互操作的注意事项
当安装了互操作插件时，Vapor 和非 Vapor 组件可以相互嵌套。这目前涵盖了标准 props、事件和插槽的使用，但尚未涵盖所有可能的边缘情况。例如，在 Vapor 模式下使用基于 VDOM 的组件库时，很可能仍然存在一些问题。
已知问题：Vapor 插槽无法在 VDOM 组件内部通过 slots.default() 渲染。必须使用 renderSlot。
我们预计这种情况会随着时间的推移而改善，但总的来说，我们建议在应用程序中拥有不同的“区域”，其中一个是 Vapor 模式，另一个是 VDOM 模式，并尽可能避免混合嵌套。
未来，我们可能会提供支持工具来强制执行代码库中的 Vapor 使用边界。
功能兼容性
Vapor 模式支持现有 Vue 功能的子集。对于支持的子集，我们旨在根据 API 规范提供完全相同的行为。这意味着有些功能在 Vapor 模式中明确不支持：
-
Options API
-
app.config.globalProperties -
getCurrentInstance()在 Vapor 组件中返回null -
@vue:xxx元素级生命周期事件
Vapor 中的自定义指令也具有不同的接口：
type VaporDirective = (
node: Element | VaporComponentInstance,
value?: () => any,
argument?: string,
modifiers?: DirectiveModifiers,
) => (() => void) | void
value 是一个响应式 getter，返回绑定值。用户可以使用 watchEffect 设置响应式效果（组件卸载时自动释放），并可以选择返回一个清理函数。例如：
const MyDirective = (el, source) => {
watchEffect(() => {
el.textContent = source()
})
return () => console.log('cleanup')
}
行为一致性
Vapor 模式尝试尽可能与 VDOM 模式行为保持一致，但由于两种渲染模式的根本差异，在边缘情况下仍然可能存在轻微的行为不一致。一般来说，我们不认为轻微的不一致是破坏性更改，除非该行为以前已记录在案。
总结
Vue 3.6 的 Beta 发布带来了令人兴奋的 Vapor 模式，为 Vue 的性能和包体积优化开启了新的篇章。虽然目前仍处于不稳定阶段，但其潜力巨大，值得所有 Vue 开发者关注和尝试。
