前言

在Vue中开发，都是使用template模板去编写代码，还有一种编写风格那就是TSX风格，我们知道React里面是用JSX语法来编写的，先说一下什么是TSX，TSX一个 TypeScript 文件，但它同时还包含了 JavaScript XML（JSX），TSX 可以帮助开发者更加直观和高效地编写UI组件和交互逻辑，同时也可以提高代码的可读性和可维护性。

在Vue2的时候也支持，不是很友好，现在Vue3对TSX的写法正在逐步接受

安装插件

第一步当然是安装插件，安装之后在vite.config.ts文件中配置一下，在plugins中注册一下tsx，就可以使用了

安装

npm install @vitejs/plugin-vue-jsx -D

配置

import vueJsx from '@vitejs/plugin-vue-jsx'
plugins: [vue(), vueJsx()],

新建TSX文件，演示使用方法

下面演示各种写法

通过export去导出一个渲染函数，让js和标签混着去使用，页面导入使用，相当于组件使用，注意引入的时候是不需要加后缀的，系统会自动做一个识别的

//App.tsx
export default function () {
  return (<div>春风吹又生</div>)
}

通过defineComponent实例来实现，类似于Vue2的写法，optionsAPI用法，区别就是在template使用定义的变量，需要两个花括号，jsx定义的时候只需要定义一个花括号


import { defineComponent  } from "vue"

export default defineComponent({
  data() {
    return {
      name: '春风吹又生'
    }
  },
  render() {
    return (<div>{this.name}</div>)
  }
})

第三种就是setup函数，在函数里面返回一个渲染函数

setup() {
  return () => (<div>春风吹又生</div>)
}

第一种和第三种平常用的多，Vue3种用的是setup函数，我们就演示setup函数的用法，和平常用vue3语法一样，单括号{}渲染DOM

注意事项

在tsx使用ref的时候，ref在template是自动解包的，如然后去读取.value,在tsx中并不会这样，是手动解包
在定义v-if的时候发现是没有效果的，这时候就需要将tsx转化为jsx来使用，比如用三元表达式去代替
在定义v-for的时候，发现还是需要使用编程的思想，用js的语法去代替，比如map，forEach等方法去代替
定义v-bind的时候，利用单花括号{}即可，比如name={x.x}
定义事件的时候，使用on为开头
props，emit定义的时候，在setup函数里面去调用
支持v-module使用，写法和vue平常一样

Vue3使用Tsx风格来编写

前言

安装插件

新建TSX文件，演示使用方法

注意事项