一、JSX简述

JSX 是 JavaScript 的一个类似 XML 的扩展，有了它，我们可以在JS中写标签，如下所示：

const vnode = <div>hello</div>

// 在 JSX 表达式中，使用大括号来嵌入动态值：
const vnode = <div id={dynamicId}>hello, {userName}</div>

        JSX最早是由 React 引入，但实际上 JSX 语法并没有定义运行时语义，并且能被编译成各种不同的输出形式。如果你之前使用过 JSX 语法，那么请注意 Vue 的 JSX 转换方式与 React 中 JSX 的转换方式不同，因此你不能在 Vue 应用中使用 React 的 JSX 转换。

二、安装配置

npm install @vitejs/plugin-vue-jsx

修改 在 vite.config.js 文件，引入并添加 jsx，如下代码所示

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入 jsx
import vueJsx from '@vitejs/plugin-vue-jsx' 

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 添加 jsx
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

三、JSX使用举例

方式1：vue文件中使用

<script setup lang="jsx">
import { ref } from "vue";

const count = ref(0)
const add = () => {
  count.value++
}

const Test = () => {
  return <button onClick={add}>+{count.value}</button>
}
</script>

<template>

<!-- 使用 -->
<Test/>

</template>

方式2：jsx文件定义使用

Step1：单独编写jsx文件

创建 Test.jsx文件，内容如下：

import { defineComponent, ref } from "vue";

export default defineComponent({
    setup() {
        const count = ref(0)
        const add = () => {
            count.value++
        }
        return () => {
            return <button onClick={add}>+{count.value}</button>
        }
    }
})

Step2：vue文件中使用

在script 引入上面jsx文件，然后再template中使用，如下所示

<script setup>
// 引入jsx文件
import Test from './Test'

</script>

<template>

<!-- 使用 -->
<Test/>

</template>

 使用效果

上面两种方式会生成按钮，点击按钮加1

四、参考文档

渲染函数 & JSX | Vue.js

- GitHub - vuejs/babel-plugin-jsx: JSX for Vue 3