<aside> 🔗 TOC

Vue 3中JSX/TSX最佳实践

</aside>

在 Vue 中使用 JSX/TSX 语法有利有弊，我们在这里不详细讨论，是否使用 JSX/TSX 取决于你的项目需求和个人偏好。本文主要介绍如何使用它，因为与 SFC（单文件组件）相比有一些不同，相信你看完后能够快速上手。

Vite 开始

首先要安装插件@vitejs/plugin-vue-jsx：

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

然后在vite.config.ts文件中进行配置：

import { defineConfig } from 'vite'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vueJsx()],
})

接下来就可以开始编写代码了，推荐使用.tsx后缀来创建组件，例如App.tsx：

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <div>Hello Vue!</div>
  },
})

这里的defineComponent只是起到类型推导的作用，你可以省略它。当然，你也可以在.vue后缀的组件中的<script>标签中进行编写，但是这种写法仍然需要在vite.config.ts中配置插件@vitejs/plugin-vue。当引入.tsx后缀的组件时，可以省略后缀名，例如：

import { createApp } from 'vue'
import App from './App'

createApp(App).mount('#app')

CSS Modules

由于不是 SFC 组件，因此我们使用 CSS Modules 的方式来编写作用域样式。在使用 CSS Modules 时，我们只需要将文件名后缀改为.module.css，Vite 已经内置了对这类文件的处理。例子如下：

.app {
  color: red;
}

引入：

import { defineComponent } from 'vue'
import styles from './app.module.css'

export default defineComponent({
  setup() {
    return () => <div class={styles.app}>Hello Vue!</div>
  },
})

插值

在 SFC 中使用双花括号{{}}来进行插值，而在 JSX 中使用单花括号{}，而且属性外层也不再需要引号。

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const text = ref('Hello Vue!')
    return () => <div style={{ width: '100px' }}>{text.value}</div>
  },
})

在这里，与 SFC 中不同的是，使用ref变量时需要添加.value。获取节点也会有所变化，需要进行修改：