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

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 'vue'

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

<template>
  <div>
    <!-- You can'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？的詳細內容。更多信息請關注PHP中文網其他相關文章！