vue3+vite如何使用jsx

1.下载vite插件

npm i @vitejs/plugin-vue-jsx -D

2.vite.config.js里配置插件

import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
})

 3.新建 .jsx 文件

使用render函数返回jsx-dom

import { defineComponent,ref } from 'vue'
export default defineComponent({
  // render可以直接返回jsx-虚拟dom
  render(){
    // 内部使用this获取data
    return <>
      <div>render函数内的jsx</div>
    </>
  }
})

使用setup函数返回jsx-dom

import { defineComponent,ref } from 'vue'
export default defineComponent({
  // setup需要返回一个函数，不能像render那样直接返回jsx-dom
  setup(){
    const count = ref(100)
    return ()=><>
      <div>setup函数内的jsx</div>
      <div>{count.value}</div>
    </>
  },
})

优先级：setup返回jsx-虚拟dom时 > render函数