在 Vue 项目里用 JSX，其实比很多人想象的要简单。核心思路就两步：配好环境，然后按规矩写代码。下面咱们直接进入正题。

1. 配置 Babel 支持 JSX

想让 JSX 在 Vue 中跑起来，第一步得让 Babel 认识它。这就像给编译器装个翻译插件，把 JSX 语法转化成 Vue 能理解的渲染函数。

先装依赖：

npm install @vue/babel-plugin-jsx -D
# 或者
yarn add @vue/babel-plugin-jsx -D

然后在项目根目录的 babel.config.js 里，把插件加进去：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

搞定这一步，JSX 就能在 Vue 项目里正常编译了。

2. 在 JS 文件中使用 JSX 的基本语法

配好之后，写个组件试试。下面是一个最简单的例子，注意看 setup 函数返回的是一个箭头函数，里面直接写 JSX：

// HelloWorld.js
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props) {
    return () => (
      

        
{props.msg}
         console.log('clicked')}>Click me
      
    )
  }
})

这里有个细节：setup 返回的渲染函数里，可以直接用 JSX 表达式插值，事件绑定也变成 onClick 这种驼峰写法，跟 React 很像。

3. JSX 与模板语法的对比

很多人会问：模板语法和 JSX 到底怎么选？其实它们本质上是同一件事的不同表达。下面这个表格把常用指令的对应关系列出来了，一目了然：

模板语法          JSX 等价写法
v-if              {condition && 
}
v-for             {items.map(item => 
{item.name}
)}
v-bind 或 :       直接使用属性 name={value}
v-on 或 @         onClick={handler}
v-model           需要手动绑定 value 和 onChange

可以看出，JSX 更接近 Ja vaScript 原生逻辑，而模板语法更偏向声明式。没有绝对的好坏，看团队习惯和项目场景。

4. 实际使用示例

光说不练假把式，咱们看几个真实场景。

带状态的组件：

// Counter.js
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return () => (
      

        
Count: {count.value}
        Increment
      
    )
  }
})

注意，在 JSX 中访问 ref 的值要加 .value，这是 Vue 3 组合式 API 的常规操作。

带子组件的示例：

// ParentComponent.js
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent'

export default defineComponent({
  setup() {
    const items = ['Apple', 'Banana', 'Orange']
    return () => (
      

        
Fruit List
        

          {items.map(item => (
            
          ))}
        
      
    )
  }
})

这里用 map 遍历生成子组件，记得给每个循环项加 key，跟 React 的要求一致。

5. 注意事项

有几个坑，新手容易踩，提前说清楚。

文件扩展名：虽然 .js 文件也能写 JSX，但推荐用 .jsx 扩展名，这样编辑器、Linter 都能正确识别，避免误报语法错误。

Vue 指令：JSX 里不能直接写 v-if、v-for 这些，必须用 Ja vaScript 原生语法替代。比如条件渲染用三元表达式或逻辑与，循环用 map。

样式处理：内联样式用对象语法，类名可以用数组或对象：

// 内联样式


// class 绑定

插槽：JSX 中插槽的写法跟模板不太一样。默认插槽用函数子节点，具名插槽用对象：

// 默认插槽
{() => '默认插槽内容'}

// 具名插槽

  {{
    default: () => '默认内容',
    header: () => 
标题
  }}

6. 与 TypeScript 结合

如果你用 TypeScript，直接创建 .tsx 文件，类型检查一块儿搞定：

// Hello.tsx
import { defineComponent, PropType } from 'vue'

interface User {
  name: string
  age: number
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType,
      required: true
    }
  },
  setup(props) {
    return () => (
      

        
Name: {props.user.name}
        
Age: {props.user.age}
      
    )
  }
})

这里用 PropType 来声明复杂类型的 props，Vue 3 的官方推荐做法。

当然，如果你不想用 setup，Vue 3 也支持传统的 render 函数写法。这种方式在 Vue 2 和 Vue 3 里都通用，适合从老项目迁移或者习惯 Options API 的开发者。

基本语法：

import { h } from 'vue'

export default {
  props: ['message'],
  render() {
    return h('div', this.message)
  }
}

用 h 函数创建虚拟 DOM，如果配置了 JSX 支持，也可以直接用 JSX 写 render：

// JsxComponent.js
export default {
  props: ['items'],
  render() {
    return (
      

        {this.items.map(item => (
          
{item.name}
        ))}
      
    )
  }
}

插槽处理：在 render 函数中通过 this.$slots 访问插槽：

// LayoutComponent.js
import { h } from 'vue'

export default {
  render() {
    return h('div', [
      h('header', this.$slots.header()),
      h('main', this.$slots.default()),
      h('footer', this.$slots.footer())
    ])
  }
}

作用域插槽则通过 this.$slots.default({ user: this.user }) 传递数据。

总结一下：在 Vue 中使用 JSX，本质上就是换了一种写渲染函数的方式。它让复杂的条件逻辑、动态组件、高阶组件的实现变得更直观，但同时也牺牲了模板的一些语法糖。选择哪种方式，取决于你的具体场景——没有银弹，只有最适合的锤子。