Vue3使用JSX/TSX

---

1. 什么是 JSX & TSX?

提示：JSX & TSX

• JSX是Facebook专门为react发明的一种新的类似于XML格式的语言，它 是JavaScipt的语法拓展。
• 它使用XML标记的方式去直接声明界面，然后再利用编译器转换成JS语言。但是Vue 早就能使用 JSX 去编写页面了~
• 并且现在大部分都是使用 Typescript 来写项目，所以 TSX 会用的更多

JSX（JavaScript XML）

• JSX是一种JavaScript的语法扩展，它允许在JavaScript代码中编写类似于XML或HTML的结构。
• JSX使得在React中编写UI组件更加直观和易于理解，它可以帮助开发人员将UI的结构和逻辑更清晰地表达出来。
• 在JSX中，可以直接在JavaScript代码中使用类似HTML的标签来描述UI组件的结构，并且可以在标签中嵌入JavaScript表达式，以动态地生成UI内容。

TSX（TypeScript XML）

• TSX是JSX的TypeScript版本，它提供了与JSX相同的功能，并添加了对类型的支持。
• TypeScript是JavaScript的一个超集，它引入了静态类型检查，使得代码更具可维护性和安全性。
• 在TSX中，可以像在JSX中一样编写UI组件，并且可以利用TypeScript的类型系统来提供更好的代码提示、错误检查和重构支持。

---

2.Vue3 中使用 TSX

我是使用了 Vue3 + Vite + TS 的项目，想要在项目中使用 TSX ，需要安装一个 Vite 插件

pnpm i @vitejs/plugin-vue-jsx -D

安装完毕后，需要在 vite.config.ts 中去进行插件配置

// vite.config.ts
import vueJsx from@vitejs/plugin-vue-jsx';

// vite.config.ts
return defineconfig({
    
    
base: './',
plugins:[
	VitePluginGitInfo()
	vue({
    
    
		script:{
    
    
			propsDestructure: true,
			defineModel: true
		},
	})
	vueJsx()，//加上插件

配置完就可以写 TSX 啦！！！

基本渲染 & 响应式 & 事件

我们可以新建一个 TsxComp.tsx 文件，来写 TSX 。写 TSX 可以不在 Vue文件 中去写

// TSXComp.tsx
import {
    
     definecomponent, ref }from 'vue';
import {
    
    Button }from 'ant-design-vue';
export default definecomponent({
    
    
setup(){
    
    
	// setup 中负责管理数据
	const count = ref(1);
	const onclick=()=>{
    
    
	count.value++;
	};
	return {
    
    
		count,
		onclick,
	};
	render(){
    
    
	//在 render 函数中去写 TSX
		return (
			<div>
				<div>{
    
    this.count}</div>
				<Button onclick={
    
    this.onclick}>点击</Button>
			</div>
		);
	},
});

接着我们可以去渲染这个组件

<!-- Parent.vue -->
<TSXComp />

可以看到基本的 渲染 & 响应式 & 事件 已经实现

3.JSX 和 template 哪个好呢？

• JSX 性能好是指的编译快，编译快其实是构建时，但是真正的性能好是运行时 Vue
• 在进行template模板编译的时候，会做各种优化，这些优化虽然会耗费构建时间，也就是构建时会比较慢，但是这些优化运用到最后产物的运行时的时候会大大提升性能

总结

• JSX构建更快，但是性能较差
• template构建更慢，但是性能较好

---

原文连接