Vue3使用JSX/TSX

news2024/11/15 12:28:11

文章目录

1. 什么是 JSX & TSX?
- JSX（JavaScript XML）
- TSX（TypeScript XML）
2.Vue3 中使用 TSX
- 基本渲染 & 响应式 & 事件
3.JSX 和 template 哪个好呢？
- 总结

请添加图片描述

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>
		);
	},
});