vue3+ts+tsx的使用与好处（语法方面：tsx==jsx）

前言：

        整理分享下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 中文文档