前言：

        整理分享下vue3+ts+tsx相关的资料，有react使用经验的小伙伴应该更能理解这个的好处，终于在vue3中也支持了，相当于函数的方法来操作界面。

1、vue3项目中为什么要用tsx（等同于我们react的jsx）

1. 类型安全：TSX 可以帮助开发者在编写代码的过程中检测类型错误，减少运行时错误的发生，并提高代码可维护性。

2. 更好的代码提示：在使用 TSX 编写代码时，开发者可以享受到更好的编码提示和自动补全功能，从而提高编写代码的效率。

3. 更容易维护：在使用 TSX 编写代码时，代码结构更加清晰明了，可读性更高，使得代码的维护更加容易。

4. 容易与 React 生态系统集成：TSX 是 React 生态系统中广泛使用的一个技术栈，使用 TSX 可以更容易地与其它开源组件和库进行集成和协作。

2、他的用法和我们常规的vue3+ts使用有什么区别

1. 语法：Vue 3 的模板语法和 TSX 的语法是不同的，Vue 3 的模板语法更接近于 HTML，而 TSX 的语法更接近于 JavaScript。

2. 类型检查：TSX 依赖于 TypeScript，可以使用 TypeScript 的类型检查功能来减少代码中的错误，而 Vue 3 的模板语法没有这种类型检查功能。

3. 可读性：TSX 的语法更接近于 JavaScript，对于熟悉 JavaScript 的开发者来说，可能更容易阅读和理解 TSX 的代码。但同时也可能会感到 TSX 的语法更繁琐，对于不熟悉 TypeScript 的开发者来说学习曲线可能会更陡峭。

4. 性能：使用 TSX 编写 Vue 3 组件可能会比使用模板语法的组件具有更好的性能。因为 TSX 可以直接将组件转换为纯 JavaScript 代码，而模板语法需要在运行时进行解析和编译。

        总的来说，使用 TSX 可以使代码更可读性更好，具有类型检查等优势，但也需要引入 TypeScript，并且需要开发者对 TypeScript 有一定的了解。而使用 Vue 3 的模板语法则更加接近于 HTML，对于前端开发者来说更加直观，但可能会牺牲一些性能。具体使用哪种方式需要根据项目需求和开发者技能来决定。

3、项目中的安装部署

1、安装, babel-plugin-jsx

npm insatll @vue/babel-plugin-jsx --save

2、在项目的 babel.config.js 文件的plugins中添加配置：

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: ['@vue/babel-plugin-jsx']
}

4、具体使用的一些方法分享（使用他与不使用做对比）

1、最重要的一点，他的模块是通过setup的return返回的

import { defineComponent, ref, reactive } from 'vue'export default defineComponent({props: {},setup(props) {const msg = ref('hello tsx')const state = reactive({count: 1})return () => {return <div>{msg.value} <span>{state.count}</span></div>}}
})

2、元素上绑定，{} 加内容

vue文件：
<com :data="data"></com>tsx文件：
<com data={data}></com>

3、v-if  必须用三木运算，或者是  &&

vue文件：
<div v-if="flag"></div>tsx文件，js逻辑代码必须用大括号包裹：
{flag ? <div></div> : null
}

isActive && <p>123</p>  //意思就是， isActive === true的情况下，展示 && 后面的标签isActive && title==='123' && <p>123</p>  
//意思就是， isActive === true && title==='123' 的情况下，展示 && 最后面的标签

4、v-for

vue文件：
<ul><li v-for="item in list" :key="item">{{item}}</li>
</ul>tsx文件：
<ul>{list.map((item) => {return <li key={item}>{item}</li>})}
</ul>

5、点击事件等绑定，有点像原生了，onScroll  ,on

vue文件：
<div @click="handleClick"></div>tsx文件：
<div onClick={handleClick}></div>onMouseenter={handleMouseEnter}
onMouseleave={handleMouseLeave}

6、子传父

vue:
子组件:
emit('custom')父组件：
<ChildComponent @custom="handleCustom" />tsx:
子组件:
emit('custom')父组件：
<ChildComponent onCustom={handleCustom} />

5、api文档分享

使用 JSX 书写标签语言 – React 中文文档