vite+jsx

标签：vue const jsx value ref vite

"@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来实现动态表单生成器）

标签：vue,const,jsx,value,ref,vite
From： https://www.cnblogs.com/shuangzikun/p/18144274