vue3 书写jsx组件 简单示例

1. vue想写jsx 需要安装 @vue/babel-plugin-jsx ：yarn add @vue/babel-plugin-jsx 或者 npm i @vue/babel-plugin-jsx
2. vite.config.js代码更改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuejsx from "@vue/babel-plugin-jsx"
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vuejsx({})],
  resolve:{
    alias:{
      "@": `${path.resolve(__dirname, './src')}`
    }
  },
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: "import { h } from 'vue';"
  }
})

3. 新建jsx组件 Hellow.jsx 写法如下

import { ref } from "vue";
// 默认导出
export default {
  setup(props,context) {
    const root = ref(null);
    return () => <div ref={root}>1221</div>;
  },
};

4. 另一种写法Hellow.jsx （函数式组件的写法）vue3中函数式组件性能提升可以忽略不计

import { ref } from "vue";
const Hellow=(props,context)=> {
    const root = ref(null);
    return () => <div ref={root}>1221</div>;
  }
  // props的声明
  Hellow.props=[]
export default Hellow