Vue 3.6 Vapor Mode 进入 RC：给 `` 加个 vapor 属性，哪些代码会踩坑
Release: vuejs/core v3.6.0-rc.1
Repo: vuejs/core
Vue 3.6 进入 RC 阶段，Vapor Mode 的目标特性集已经完成。3.6 还包含一次基于 alien-signals 的 @vue/reactivity 大重构，反应式系统的性能和内存占用都有显著改善。
Vapor Mode 是什么
Vapor Mode 是 Vue 单文件组件（SFC）的一种新编译模式，目标是减小基础包体积、提升性能。
它 100% 可选（opt-in），支持现有 Vue API 的一个子集，行为基本一致。依赖 VNode 或组件公共实例代理（public instance proxy）的功能，在 Vapor 组件中不可用。
在第三方基准测试（krausest/js-framework-benchmark）中，Vapor Mode 的性能与 Solid、Svelte 5 处于同一级别。
怎么开启
Vapor Mode 只对使用 的单文件组件生效。开启方式是在 上加 vapor 属性：
两种使用方式
1. 在 Vapor 应用里使用
通过 createVaporApp 创建 Vapor 应用实例，Vapor 组件直接放在里面。这种方式不会把 Virtual DOM 运行时代码打进包里，基础包体积可以大幅下降。
2. 在 VDOM 应用里使用
在通过 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 运行时拉回来，抵消小包体带来的收益。
稳定性与当前建议
Vapor Mode 在 Vue 3.6 RC 中已经功能完整。目前官方建议的使用场景有两类：
- 在既有应用中局部使用，例如用 Vapor Mode 实现某个性能敏感的页面。
- 完全用 Vapor Mode 编写小型新应用。
另外，仅 Vapor 模式下不支持 Suspense，但可以在 VDOM 的 Suspense 中渲染 Vapor 组件。
迁移时需要注意的点
- 组件一旦标记为
vapor，就不能再依赖 VNode 或组件公共实例代理提供的功能，这类代码需要保持在普通 SFC 里，或改写。 - 用
createApp+vaporInteropPlugin的路线会保留 vdom 运行时，包体收益要按这一点估算；只有createVaporApp才能拿到最小的基础包体积。 - 既有项目可以不用整体切换，按页面粒度把性能敏感的部分改成 Vapor 组件即可；新写的小应用可以整体走 Vapor。
- 仅在 Vapor 下运行的部分不要引入 Suspense，需要 Suspense 时把它放在 VDOM 层。