快捷導(dǎo)航

vue3使用jsx語(yǔ)法詳解

更新時(shí)間：2026年02月18日 09:51:41 作者：星光不問(wèn)趕路人

在絕大多數(shù)情況下,Vue 推薦使用模板語(yǔ)法來(lái)創(chuàng)建應(yīng)用,然而在某些使用場(chǎng)景下,我們真的需要用到 JavaScript 完全的編程能力,這時(shí)JSX或渲染函數(shù)就派上用場(chǎng)了,下面就來(lái)介紹一下如何使用

雖然最早是由 React 引入，但實(shí)際上 JSX 語(yǔ)法并沒(méi)有定義運(yùn)行時(shí)語(yǔ)義，并且能被編譯成各種不同的輸出形式。如果你之前使用過(guò) JSX 語(yǔ)法，那么請(qǐng)注意 Vue 的 JSX 轉(zhuǎn)換方式與 React 中 JSX 的轉(zhuǎn)換方式不同，因此你不能在 Vue 應(yīng)用中使用 React 的 JSX 轉(zhuǎn)換。與 React JSX 語(yǔ)法的一些明顯區(qū)別包括：

可以使用 HTML attributes 比如 class 和 for 作為 props - 不需要使用 className 或 htmlFor。
傳遞子元素給組件 (比如 slots) 的方式不同。

添加的配置

1?? tsconfig

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue"
  }
}

2?? vite.config.ts

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

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

代碼演示

在 vue文件 中

<script setup lang="tsx">
import { computed, defineComponent, ref } from 'vue'

const count = ref(0)

// 1. 定義一個(gè) JSX 片段或小組件
const RenderHeader = () => (
  <header>
    <h2>這是 JSX 渲染的標(biāo)題</h2>
    <p>當(dāng)前計(jì)數(shù): {count.value}</p>
  </header>
)

// 2. 這是一個(gè)返回 VNode 的計(jì)算屬性。搭配 component 使用
const renderContent = computed(() => {
  return count.value > 5 ? (
    <span>已達(dá)到上限</span>
  ) : (
    <button onClick={() => count.value++}>增加</button>
  )
})

// 3. 普通組件, setup返回一個(gè)渲染函數(shù)
const Bbb = defineComponent({
  name: 'Bbb',
  setup() {
    return () => <div>11111</div>
  },
})
</script>

<template>
  <RenderHeader />
  <component :is="renderContent" />
  <Bbb />
</template>

注意：lang的值是 tsx

在 tsx文件 中

// 函數(shù)式組件
export default () => {
  return <div class={styles.name}>hello world</div>
}

export const Aaa = defineComponent({
  setup() {
    const t = ref(Date.now())
    // 返回渲染函數(shù)
    return () => <div>aaa {t.value}</div>
  },
})

樣式方案選型

使用 JSX/TSX，CSS Modules 或 Tailwind CSS 是更好的搭檔。Scoped CSS 是專(zhuān)為 Template 設(shè)計(jì)的。

在 vue文件中，使用 CSS Modules

<style module>
.header {
  color: blue;
}

.content {
  color: green;
}

.bbb {
  color: red;
}
</style>

eslint

要在 vue文件中使用tsx，應(yīng)添加 configureVueProject 的配置

configureVueProject({ scriptLangs: ['ts', 'tsx'] })

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,
)