vue3+vite使用jsx和tsx详情

安装@vitejs/plugin-vue-jsx

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

配置vite.config.js

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

使用实战

新建xxx.tsx或者xxx.jsx，注意不再是vue为后缀

第一种写法使用this

使用了this，个人不太推荐

import { defineComponent, ref } from 'vue';
export default defineComponent({
? setup(){
? ? const str = ref<string>('tsx的使用');
? ? const clickFunc1 = () => {
? ? ? console.log('没有参数');
? ? }
? ? const clickFunc2 = (msg: string = '默认值') => {
? ? ? console.log(msg);
? ? }
? ? return {
? ? ? str,
? ? ? clickFunc1,
? ? ? clickFunc2
? ? };
? },
? render(){
? ? return (
? ? ? <>
? ? ? ? <div class='async'>{this.str}</div>
? ? ? ? <button onClick={this.clickFunc1}>不传参数点击</button>
? ? ? ? <button onClick={() => this.clickFunc2('额外参数')}>传参数点击</button>
? ? ? </>
? ? );
? }
})

第二种写法

函数体等价于setup，此方式无法获取到props与emits等等(可能我没有了解到)，存在交互性强的也不建议使用，否则可以考虑

import { defineComponent, ref } from 'vue';
export default defineComponent(() => {
? const str = ref<string>('tsx的使用');
? const clickFunc1 = () => {
? ? console.log('没有参数');
? }
? const clickFunc2 = (msg: string = '默认值') => {
? ? console.log(msg);
? }
? const render = (
? ? <>
? ? ? <div class='async'>{str.value}</div>
? ? ? <button onClick={clickFunc1}>不传参数点击</button>
? ? ? <button onClick={() => clickFunc2('额外参数')}>传参数点击</button>
? ? </>
? );
? return () => render;
})

第三种写法

比较推荐这种写法

import { defineComponent, ref } from 'vue';
export default defineComponent({
? props: {
? ? params: {
? ? ? type: Object,
? ? ? default: () => {}
? ? }
? },
? setup(props){
? ? const str = ref<string>('tsx的使用');
? ? const clickFunc1 = () => {
? ? ? console.log('没有参数');
? ? }
? ? const clickFunc2 = (msg: string = '默认值') => {
? ? ? console.log(msg);
? ? ? console.log(props);
? ? }
? ? return () => (
? ? ? <>
? ? ? ? <div class='async'>{str.value}</div>
? ? ? ? <button onClick={clickFunc1}>不传参数点击</button>
? ? ? ? <button onClick={() => clickFunc2('额外参数')}>传参数点击</button>
? ? ? </>
? ? );
? }
})

来源：https://blog.csdn.net/Ag_wenbi/article/details/122210248