vite+jsx

"@vitejs/plugin-vue-jsx": "^3.1.0"

vite配置

import vueJsx from '@vitejs/plugin-vue-jsx' // 新增這一句

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx() // 新增這一句
]
})

"vite": "3.0.0",

"compilerOptions": {

"jsx": "preserve",

}

第一種寫法

test.jsx

import { defineComponent, ref } from "vue";

const TestJsx = defineComponent({

emits: ['click', 'getDate'],

setup(props, {emit}) {

const val = ref('this is a input');

const userName = ref('this is a username');

const handleInputChange = (e) => { val.value = e.target.value }

const handleClick = () => {

alert("this is a button")

emit("click")

}

const vnode = <div>hello, {userName.value}</div>

const list = [1, 2, 3]

return () => <>

<div>{val.value}</div>

{list.map(item => <div onclick={handleClick}>{item}</div>)}

{vnode}

</>

}

})

export default TestJsx

　

第二種寫法
test.vue

// render.vue
<script lang="jsx">
import { ref } from "vue";
import { defineComponent } from 'vue'
export default {
  setup() {
    const count = ref(100);
    return () => <div>count is: {count.value}</div>;
  },
};
</script>

　在實現業務需求的時候，優先使用 template，儘可能地利用 Vue 本身的效能最佳化。而對於動態性要求較高的元件可以使用 JSX 來實現。（比如後面，我會用JSX來實現動態表單生成器）