是的，Vue 支持JSX，但需要額外配置，1. 對(duì)於Vite 項(xiàng)目，安裝@vitejs/plugin-vue-jsx 並在vite.config.js 中添加vueJsx() 插件；2. 對(duì)於Vue CLI 項(xiàng)目，安裝@vue/babel-preset-jsx 並在babel.config.js 中添加預(yù)設(shè)；3. 使用defineComponent 和setup 函數(shù)返回JSX 內(nèi)容，注意使用class 和onClick 等Vue 約定；4. 在.vue 文件中可通過h 函數(shù)或組件is 綁定調(diào)用JSX 渲染函數(shù)；5. 使用TypeScript 時(shí)，文件命名為.tsx，配置tsconfig.json 的jsx 為preserve 且jsxImportSource 為vue；需注意模板語法如v-if、v-for 不適用於JSX，應(yīng)使用JavaScript 表達(dá)式替代，且JSX 在Vue 中非主流，適用於復(fù)雜渲染邏輯場景，完整支持需結(jié)合構(gòu)建工具配置。

Vue doesn't support JSX out of the box, but you can use JSX in Vue — especially if you're working with Vue 3 and using the Vite or Vue CLI build setup. Here's how to enable and use JSX in your Vue project.

? Why Use JSX in Vue?

While Vue traditionally uses templates, JSX gives you more programmatic control over rendering — useful for complex component logic, dynamic children, or if you're coming from a React background.

1. Enable JSX Support

For Vite Projects

Install the JSX plugin for Vue:

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

Then, update your vite.config.js :

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

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

Now you can use .jsx or .tsx files, or even write JSX inside .vue files in the setup function.

For Vue CLI Projects

If you're using Vue CLI, install the Babel plugin:

 npm install @vue/babel-preset-jsx -D

Then in your babel.config.js :

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

2. Write JSX in Components

You can now write components using JSX. Here's an example of a .jsx file:

 // MyButton.jsx
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    label: String,
    onClick: Function
  },
  setup(props) {
    return () => (
      <button onClick={props.onClick} class="my-button">
        {props.label}
      </button>
    )
  }
})

Note: Use class instead of className , and onClick instead of onclick — it follows Vue's DOM conventions.

3. Using JSX in .vue Files (Optional)

You can mix JSX in the <script setup> section:

 <script setup>
import { h } from &#39;vue&#39;

const renderDynamic = () => {
  return h(&#39;div&#39;, { class: &#39;dynamic&#39; }, [
    h(&#39;span&#39;, &#39;Hello JSX inside Vue!&#39;)
  ])
}
</script>

<template>
  <div>
    <!-- You can&#39;t use JSX in <template> -->
    <!-- But you can call render functions -->
    <component :is="renderDynamic" />
  </div>
</template>

Alternatively, use JSX only in setup() return if you're not using <template> .

4. JSX with TypeScript (.tsx)

If you're using TypeScript, name your file .tsx and define props with interfaces:

 import { defineComponent } from 'vue'

interface Props {
  name: string
  count?: number
}

export default defineComponent({
  props: {
    name: { type: String, required: true },
    count: { type: Number, default: 0 }
  },
  setup(props: Props) {
    return () => (
      <div>
        <h1>Hello, {props.name}!</h1>
        <p>Count: {props.count}</p>
      </div>
    )
  }
})

Make sure your tsconfig.json allows JSX:

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

?? Things to Keep in Mind

• Templates are still the standard in Vue — JSX is optional and less common.

• No template features in JSX : directives like v-if , v-for don't work. Use JavaScript expressions instead:

   // Instead of v-if
  {show && <p>Shown</p>}
  
  // Instead of v-for
  {items.map(item => <div key={item.id}>{item.label}</div>)}

• Event handlers: Use onClick , onInput , etc. (camelCase), and pass functions directly.

• Use onUpdate:xxx for v-model -like behavior.

---

Summary

You can use JSX in Vue with the right setup:

• ? Install @vitejs/plugin-vue-jsx (for Vite) or Babel preset (for Vue CLI)
• ? Use defineComponent and setup to return a render function
• ? Write JSX with Vue's event and binding conventions
• ? Works with TypeScript via .tsx

It's not as common as in React, but it's powerful for dynamic or reusable render logic.

Basically, Vue supports JSX — just not in templates. Use it where it adds value.

以上是如何在VUE中使用JSX？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！