已解决 vue怎么用jsx的正确打开方式，附选择建议与失败排查

你想在 Vue 里写 JSX，照着网上的例子配了一通，结果组件渲染空白、控制台报「JSX 未定义」，或者热更新之后写法突然失效。vue 怎么用 JSX 正确的打开方式，是先装对 @vue/babel-plugin-jsx 这个编译插件，再用 render 函数或 setup 返回一段 JSX，而不是在模板里直接塞尖括号。很多人卡住，是因为把模板编译和 JSX 编译当成了同一回事，其实它们是 Vue 模板编译器之外的另一条独立路径。

vue 怎么用 JSX 正确的打开方式

本文基于 Vue 3.4 与 @vue/babel-plugin-jsx 实测，覆盖插件配置、render 函数写法、setup 返回 JSX、函数式组件四种用法，并附编译失败时的逐项排查清单。读完你不仅能跑通第一个 JSX 组件，还能判断自己的业务场景到底该不该上 JSX，避免为了「像 React」而盲目替换模板。Vue 使用 JSX 并不复杂，难的是分清它和模板各自的边界。

先看结论

Vue 使用 JSX 前先明确：Vue 默认走模板编译，要写 JSX 必须安装 @vue/babel-plugin-jsx 并在构建配置里启用，否则构建期就报语法错误。
组件里既可以用 render 函数返回 JSX，也可以在 setup 中直接 return 一段 JSX，两者最终都编译成 h 调用。
模板和 JSX 不是二选一：复杂动态结构用 JSX 更灵活，静态结构用模板更直观，一个项目里两者可以共存。
选型别看性能神话，编译后差异极小，真正该比的是可维护性与团队熟悉度。

一、最小场景与预期行为

先明确目标：你希望组件最终渲染出一段由 JavaScript 表达式动态拼出的结构，比如根据状态切换标签、在循环里生成列表。先看 Vue3 教程里模板与渲染函数的关系，理解两者最终都编译成虚拟 DOM，只是入口不同。再次强调，Vue 使用 JSX 只是多了一条编译路径，不是要你推翻模板。

具体触发条件分三类。第一，没装 babel 插件就写 JSX，构建期直接报语法错误；第二，把 JSX 当成模板字符串写在模板里，运行时根本不解析；第三，在 setup 外的地方返回 JSX，作用域拿不到响应式数据，页面要么空白要么报错。复现的价值在于把「说不清」变成「必现」，后续每一步才有对照。

⚠️ 注意：不要为了「看起来像 React」盲目全量改用 JSX。Vue 的响应式与模板指令是深度绑定的，强行替换会丢掉很多内置能力，比如 v-model 的语法糖、作用域插槽的简洁写法，这些用 JSX 要自己手写一遍，得不偿失。

一个常见误解是「JSX 比模板快」。实际上两者编译后差异极小，选型应看可维护性，而不是性能神话。需要动态拼结构时 JSX 更顺手，但表单类、列表类静态结构用模板反而更易读，新人接手也更快。

二、最稳的实现：babel 插件加 render 函数

先把插件装上，并写进构建配置：

npm install @vue/babel-plugin-jsx -D

然后在 babel 配置里启用它，组件用 render 函数返回 JSX：

export default {
  props: ['name'],
  render() {
    return <div class="card">你好，{this.name}</div>
  }
}

上面这段在编译期会被 babel 插件转成 h 调用。执行后页面应显示带 name 的卡片。语法细节可查 JavaScript 教程的表达式章节，理解 { } 里能放任意 JS 表达式，包括三元、map 和立即执行函数。这里再次提醒，Vue 使用 JSX 时属性命名要按 Vue 约定。

需要注意，JSX 里的 class 要写成 class（不是模板里的 className），这是 Vue 的约定，和 React 不同。属性绑定用大括号，事件用 onClick 这类驼峰写法，而不是模板里的 @click。初上手最容易踩的就是这两个命名差异，报错信息还不直观，常常让人以为是插件没装。

babel.config.js 启用 jsx 插件截图

三、替代方案与取舍

如果偏好组合式 API，可以在 setup 里直接返回 JSX，配合 Deep Learn Javascript 教程理解函数式写法：

import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return () => <button onClick={() => count.value++}>{count.value}</button>
  }
}

这种函数式组件写法适合高度动态的逻辑，比如根据数据递归渲染树形结构。常用 API 可翻 JavaScript 速查手册快速回忆。开发时把片段丢进在线环境跑一遍，比在完整工程里打断点快得多，也能隔离问题到底出在写法还是出在构建链。想在线试片段，JavaScript 在线运行也能快速验证语法，不必每次都起本地工程。Vue 使用 JSX 的响应式来源和普通模板完全一致，只是写法不同。

💡 小提示：setup 返回的是「一个返回 JSX 的函数」，不是直接返回 JSX 片段。漏掉外层箭头函数，拿到的是一次性静态结果，响应式更新不会触发重渲染，页面看起来「死了」却无报错。

函数式组件没有 this，所有状态都来自 setup 里定义的 ref 或 reactive。这点和选项式 render 函数不同，迁移时要留意作用域。需要传参时把 props 解构成变量即可，和模板里用 props.xxx 是同一份数据源，只是读取方式变了。

npm run dev 启动计数器组件截图

四、反例、边界与常见失败

把最容易翻车的点列出来：

现象：构建报 Support for the experimental syntax 'jsx' isn't currently enabled。原因：babel 插件没启用。解决：确认插件写进 babel 配置且依赖已安装，Vite 项目还要检查对应的 esbuild 配置是否包含该插件。
现象：JSX 里取不到响应式值。原因：在 setup 外返回 JSX。解决：把 JSX 放到 setup 返回值或 render 内，确保处于响应式作用域。
现象：热更新后 JSX 写法失效。原因：babel 配置改动后 dev 没重启。解决：彻底重启 npm run dev，不要指望局部刷新能拾取编译配置变化。
现象：事件不触发。原因：用了模板的 @click 写法。解决：改成 JSX 的 onClick，且回调要用箭头函数包一层，否则会直接执行而不是绑定。
现象：片段在 React 工程能跑，搬进 Vue 报错。原因：把 React 的 className、htmlFor 习惯带过来了。解决：统一改成 Vue 约定的 class 与 for。

总结

vue 怎么用 JSX，核心是装对 @vue/babel-plugin-jsx 并明确走 render 或 setup 返回两条路径。模板与 JSX 各有适用面，按结构复杂度选，别为跟风而换。Vue 使用 JSX 适合动态结构，但静态结构仍建议模板。

要点带走：

先装 babel 插件再写 JSX；
render 与 setup 返回是两条主路径；
失败先看插件启用与配置重启；
事件与 class 命名按 Vue 约定，别套 React 习惯。

下一步可以系统学一遍 Vue3 组合式写法，把响应式吃透，再决定哪些组件值得用 JSX 重写。

延伸学习

想把这块知识系统补齐，可以按这个顺序来：

常见问题

Q：Vue 里 JSX 和模板必须二选一吗？

A：不是。一个项目里可以部分组件用模板、部分用 JSX，只要构建链启用了 babel 插件，两者能共存。选型看结构复杂度，而不是全量统一，很多团队是渐进式引入的。

Q：为什么我写的 JSX 里 class 不生效？

A：Vue 的 JSX 沿用模板习惯用 class 属性名，不是 React 的 className。写错属性名，样式自然挂不上，改成 class 即可，这是新手最高频的坑。

Q：babel 插件装了还是报 JSX 语法错误？

A：多半是配置没生效或 dev 没重启。先确认插件名写进 babel 配置，再彻底重启开发服务器；用 Vite 时也要保证对应的 esbuild 配置包含该插件，否则 dev 与 build 表现会不一致。