uni-app x 蒸汽模式（Vapor）技术梳理：无 VDOM + 自研 UI 渲染层
uni-app x 的蒸汽模式（Vapor）近期已覆盖 HarmonyOS、iOS、Android 三端。这次更新有两条主线：一是基于 Vue Vapor 去掉 Virtual DOM；二是 DCloud 在 App 端重新实现了一套 UI Framework，核心组件不再直接依赖系统组件，而是走自研实现 + 系统原生渲染管线。
渲染链路变化
传统 Vue 页面更新是这样一个过程：
Template → VNode → Diff → 更新 UI
Vapor 模式去掉 VNode 和运行时 diff，编译器直接生成更精准的 UI 更新代码。uni-app x Vapor 在这之上把 App 端组件层重做了一遍：view、text、image、list、swiper 等组件全部重新实现，配合 Vue Vapor、编译优化、Flatten 拍平、视图树优化来削减布局和更新开销。
底层仍然使用 Android / iOS / HarmonyOS 各自的渲染管线，不是自绘引擎。整套结构可以概括为：
Vue Vapor + 新 UI Framework + 系统 Rendering Pipeline
官方 Benchmark 数据
说明：目前对外公布的性能数据都来自 DCloud 官方，没有看到第三方复测。测试页面是官方构造的，与真实业务页面结构不同，迁移前建议拿自己的核心页面打 Release 包跑一遍再判断收益。
场景一：同屏创建 4050 个元素
官方测试是一次性创建 4050 个元素（2050 View + 2000 Text），没有懒加载，也没有列表复用。三端耗时对比：
- Android：原生 UI 505ms，Vapor 273ms（约 1.85×）
- iOS：原生 UI 325.76ms，Vapor 167ms（约 1.95×）
- HarmonyOS：原生 UI 804ms，Vapor 267ms（约 3×）
Android 细分数据（小米 Fold4）：
- Vapor：229.2ms
- Android View：461.8ms
- Compose：625.8ms
Vapor 约为 Android View 的 2 倍、Compose 的 2.73 倍。
场景二：长列表滚动
官方构造了一个长列表：4000 行数据、7.4MB JSON、约 2 万个 UI 元素、约 1333 屏，每行含 40+ 元素，嵌套 10+ 层。
- 小米 Fold4：Vapor 109 FPS，Compose 51.09 FPS，Android View 45.35 FPS
- iPhone 16 Pro Max：Vapor 111 FPS，SwiftUI 49 FPS
长列表是跨端 App 常见的性能短板场景。这里同样要记住是官方口径，具体列表结构、图片加载、节点复杂度不同，结果会明显浮动。
“超过原生”的具体含义
Vapor 对比的对象是系统 UI Framework：
- Android View / Compose
- UIKit / SwiftUI
- ArkUI
它没有绕过系统渲染管线，而是自己做了一套跨三端的上层 UI Framework，用一套描述结构直接驱动原生渲染。省掉的是 VDOM diff 和跨框架桥接的额外开销，比的是“上层组件框架实现效率”，不能理解为“跨端比系统底层渲染更快”。
运行引擎：从 UTS 回到 JavaScript
uni-app x 早期主推 UTS，编译产物面向 Kotlin / Swift / ArkTS。Vapor 改为由 JavaScript Engine 驱动，Vapor 页面可以直接写 JavaScript / TypeScript / UTS。
官方给出的理由是：新渲染引擎性能足够高，优化跨语言通信后，JS 带来的性能损耗可以控制在 5% 以内；换回 JS 可以获得 npm 生态、TypeScript、动态化能力、更低迁移成本，以及对 AI Coding 更友好。这个“5% 以内”也是官方口径，实际项目中 JS 线程负载属于哪个量级，需要结合业务压测确认。
支持范围与版本
- HarmonyOS：HBuilderX 5.0+
- iOS：HBuilderX 5.11+
- Android：HBuilderX 5.21+
- Android 离线打包 SDK：HBuilderX 5.25+（此前 Android Vapor 不支持离线打包）
开启方式：项目根目录 manifest.json 可视化界面直接勾选“蒸汽模式”，不需要手改配置。
边界：Web 端和小程序端编译产物仍走 VDOM 渲染，不是真正的 Vapor，Vapor 的优势目前只覆盖 App 三端。
上手步骤
- 安装 HBuilderX 5.21+，新建项目时选择 uni-app 项目并勾选 uni-app x。
- 打开
manifest.json，在可视化界面勾选“蒸汽模式”。 - 页面按普通 Vue 写法开发：
{{ title }}
count: {{ count }}
import { ref } from 'vue'
const title = ref('Hello Vapor')
const count = ref(0)
.page {
padding: 30px;
}
- 运行 → 运行到 Android / iOS / HarmonyOS。
注意：如果要压测官方宣传的性能数据，建议使用 Release 模式或正式包，不要直接拿调试模式对比。
现状判断
Vapor 目前的完整链路是：Vue Vapor + JS/TS + 编译优化 + 自研 UI Framework + 原生 Rendering Pipeline。去 VDOM 只是其中一部分，真正动的是 App 渲染层实现。稳定性、组件覆盖度、三端对齐程度仍在补齐阶段，选型前需要先确认两件事：官方 Benchmark 在你自己页面里能否复现，以及现有组件是否能覆盖业务需求。
参考：https://doc.dcloud.net.cn/uni-app-x/app-vapor.html