vue3中使用jsx

# 需要安装 @vitejs/plugin-vue-jsx" 插件
# vite.config.js中配置

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()],
  esbuild:{
    jsxFactory:'h',
    jsxFragment:'Fragment',
    jsxInject:"import { h } from 'vue';"
  }
})

```


## 需要注意一下几点

1. v-if 使用三元运算符代替，或者条件语句
   

2. v-model 可正常使用
   

3. v-for 使用map来编写
   

4. 事件用onClick ...
   

import { defineComponent, watchEffect } from "vue";

export default defineComponent({
    props: {
        name: {
            type: Number
        }
    },
    setup(props) {
        console.log("props", props)
        watchEffect(() => {
            console.log('子组件监听', props.name)
        })

        return () => {

            return <div>list----{props.name}</div>
        }
    }
})