最近，尤雨溪在推特上转发了一条看似不长、但信息量非常大的动态：

Introduce vue-jsx-vapor 3.1

nerror="javascript:errorimg.call(this);">

如果你对 Vue 生态足够敏感，应该能意识到一件事：

这不是一个普通的 JSX 插件更新，而是 Vue 渲染体系的一次重要扩展。

nerror="javascript:errorimg.call(this);">

Vue JSX Vapor，正式登上舞台。

为什么需要 Vue JSX Vapor？

在聊 Vue JSX Vapor 之前，我们先回到一个大家都很熟悉的问题。

Vue 3 其实天然支持 JSX

这一点很多人容易忽略：Vue 3 从一开始就是支持 JSX 的。

但现实情况是：

• 大部分 Vue 项目仍然以 template 为主
• JSX 在 Vue 项目中，更多是“少数派选择”

原因并不复杂。

Vue 自带 JSX 的“现实问题”

如果你在 Vue 3 中真实使用过 JSX / TSX，大概率会遇到这些情况：

• ❌ 不能完整使用 Vue 内置指令
• ❌ 需要放弃很多 template 里的便捷能力
• ❌ 一些写法需要绕来绕去

而更尴尬的是另一种场景

template + h 函数：写过一次，就不想再写第二次

在 template 中，我们经常会遇到这种需求：

需要动态渲染一小段结构，但又不值得单独拆一个组件。

于是你只能退回到 h 函数。

h('div', {}, [  h('span', {}, 'text'),  h('button', { onClick: handleClick }, 'click')])

当结构一复杂，结果就是：

• 层级无限嵌套
• 可读性极速下降
• 后期几乎不敢改

这几乎是每个 Vue 开发者都踩过的坑。

有没有一种方式：两者兼得？

问题其实很清晰了：有没有一种方式，既能写 JSX 的灵活表达，又能完整享受 Vue 的能力？

nerror="javascript:errorimg.call(this);">

答案就是： Vue JSX Vapor

什么是 Vue JSX Vapor？

一句话总结：Vue JSX Vapor 是 Vue Vapor 渲染体系下的 JSX 编译模式。

nerror="javascript:errorimg.call(this);">

它不是“社区魔改方案”，而是：

• 与 Vue官方编译器输出一致
• 与 template 站在同一条编译链路上
• 同时支持 Virtual DOM 和 Vapor DOM

这也是为什么尤雨溪会亲自转发这条消息。

Vue JSX Vapor 带来了什么？

JSX 终于支持完整 Vue 指令

这是 Vue JSX 多年来最大的短板，而 Vapor 一次性补齐了。

nerror="javascript:errorimg.call(this);">

你现在可以在 JSX 中直接使用：

• v-if / v-else / v-else-if
• v-for
• v-model
• v-slot
• v-once / v-text / v-html

不用再为了 JSX，放弃 Vue 的“原生体验”。

同时支持 Virtual DOM & Vapor DOM

nerror="javascript:errorimg.call(this);">

Vue JSX Vapor 支持两种编译目标：

• Virtual DOM（传统 Vue 渲染）
• Vapor DOM（无虚拟 DOM）

而且是编译期决定，不是运行时妥协。

这意味着：JSX 也可以拥有 Vapor 级别的极致性能。

编译结果与 template 完全一致

官方明确提到：The same compiler output as Vue’s template compiler

这句话的含金量非常高，它意味着：

• 行为一致
• 优化策略一致
• 生态工具可复用

从架构层面看，这是一个非常明确的信号：JSX 不再是“二等语法”。

Rust 编译器 + Oxc，性能不是说说而已

nerror="javascript:errorimg.call(this);">

Vue JSX Vapor 的编译器并非基于 Babel，而是：

• 使用 Rust 编写
• 基于 Oxc 构建

官方给出的性能对比是：

相比 Babel JSX 插件，性能提升最高可达 20 倍

对于大型项目、Monorepo、CI 构建来说，这是实实在在的收益。

类型安全 & 工程化支持

• TS Macro + Volar 提供完整类型推导
• 官方 ESLint 插件，保证代码风格与可维护性

这说明一件事：Vue JSX Vapor 不是 Demo，而是工程级方案。

如何快速使用 Vue JSX Vapor？

以 Vite 为例，只需要一步：

// vite.config.tsimport vueJsxVapor from 'vue-jsx-vapor/vite'export default {  plugins: [vueJsxVapor()]}

之后你就可以直接在 Vue 项目中使用 TSX / JSX，并进入 Vapor 编译模式。

为什么我推荐 JSX / TSX？

如果你用过 React，应该会对 JSX 的一个特性印象非常深刻：极高的灵活性。

nerror="javascript:errorimg.call(this);">

在 Vue JSX Vapor 下，这个优势被完整保留了。

一个非常典型的场景

有时候我们只是想动态渲染一个小部件，并不值得单独拆组件。

使用 JSX，你可以这样写：

function renderBadge(type: 'success' | 'warning') {if (type === 'success') {    return<span class="badge success">成功</span>  }return<span class="badge warning">警告</span>}exportdefault () => {return (    <div>      {renderBadge('success')}    </div>  )}

这种写法的好处是：

• 不需要新组件
• 不需要 template + h
• 逻辑与结构天然绑定
• 可读性极强

这正是 React 多年来坚持 JSX 的核心原因之一。

nerror="javascript:errorimg.call(this);">

而现在，Vue 也终于可以在不牺牲性能、不牺牲指令能力的前提下，做到这一点。

Vue 3 全新的开发方式：TSX 最佳实践

nerror="javascript:errorimg.call(this);">

Vue JSX Vapor 并不是在“替代 template”，而是在做一件更聪明的事：

让 template 和 JSX 进入同一套高性能编译体系。

你可以：

• 页面级、静态结构 → 用 template
• 高动态、强逻辑组件 → 用 TSX / JSX

而不用再担心：

• 性能
• 指令缺失
• 工程割裂

写在最后

Vue JSX Vapor 的发布，标志着一件事：

Vue 3 的开发方式，正在进入一个真正多范式共存的时代。

Template、JSX、Virtual DOM、Vapor不再是对立选择，而是同一体系下的不同入口。

Vue 3，全新时代，才刚刚开始。

• Vue JSX Vapor 官网：https://jsx-vapor.netlify.app/