Vue 3中使用JSX - 技术栈

在Vue 3中使用JSX，主要可以通过配置Babel插件 或配置Vite插件来实现。这让你能更灵活地运用JavaScript的强大表达力来构建用户界面。

配置方式	适用场景	主要依赖包	配置文件	特点
Babel插件	已有Babel配置或使用Webpack等项目	`@vue/babel-plugin-jsx`	`.babelrc` 或 `babel.config.js`	灵活性高，可自定义配置
Vite插件	使用Vite构建工具的项目	`@vitejs/plugin-vue-jsx`	`vite.config.js`	与Vite紧密集成，配置简单，开发体验快

🛠️ 配置 JSX

使用 Babel 插件

安装插件：在项目目录下，通过npm或yarn安装Babel插件。
bash 复制代码
```
npm install @vue/babel-plugin-jsx --save-dev
```
配置Babel ：在项目根目录创建或修改 .babelrc 文件，添加插件配置。
json 复制代码
```
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@vue/babel-plugin-jsx"]
}
```

使用 Vite 插件

安装插件：在项目目录下，安装Vite的JSX插件。
bash 复制代码
```
npm install @vitejs/plugin-vue-jsx --save-dev
```

配置Vite ：在项目根目录的 vite.config.js 文件中引入并配置插件。

javascript 复制代码

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

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

💡 编写 JSX 代码

配置好环境后，你就可以在Vue组件中使用JSX了。

基本使用

你可以在组件的 render 函数或 setup 函数中返回JSX。

jsx 复制代码

// 在 setup 函数中
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const msg = ref('Hello, Vue 3 with JSX!');
    return () => <div>{msg.value}</div>;
  }
});

jsx 复制代码

// 在 render 函数中
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello from render function!'
    };
  },
  render() {
    return <div>{this.message}</div>;
  }
});

JSX 中的常见指令

在JSX中，Vue模板的指令如 v-if, v-for, v-model 等，需要换一种方式使用。

条件渲染 (v-if) ：使用 JavaScript 的逻辑与 (&&) 或三元运算符 (? :)。

jsx 复制代码

export default defineComponent({
  setup() {
    const isShow = ref(true);
    return () => (
      <div>
        {isShow.value ? <div>Now you see me.</div> : null}
        {isShow.value && <div>This also works.</div>}
      </div>
    );
  }
});

列表渲染 (v-for) ：使用 JavaScript 的 map 方法。切记为每个元素添加唯一的 key。

jsx 复制代码

export default defineComponent({
  setup() {
    const items = ref(['Apple', 'Banana', 'Cherry']);
    return () => (
      <ul>
        {items.value.map(item => <li key={item}>{item}</li>)}
      </ul>
    );
  }
});

双向绑定 (v-model)：在JSX中，你需要手动实现值的绑定和事件监听。对于原生表单元素，可以这样操作：
jsx 复制代码
```
export default defineComponent({
  setup() {
    const inputValue = ref('');
    return () => (
      <input 
        type="text" 
        value={inputValue.value} 
        onInput={(e) => { inputValue.value = e.target.value; }}
      />
    );
  }
});
```
也可以使用 v-model 的语法糖，但需要确保你的环境支持（例如，通过 @vue/babel-plugin-jsx 可能支持类似 v-model={[value, 'modifiers']} 的语法，具体请查阅相关插件文档）。

事件监听 ：使用 on 前缀，例如 onClick。

jsx 复制代码

export default defineComponent({
  setup() {
    const handleClick = () => {
      console.log('Clicked!');
    };
    return () => (
      <button onClick={handleClick}>Click Me</button>
    );
  }
});

属性/Props 绑定 ：使用单花括号 {} 传入变量或表达式。

jsx 复制代码

export default defineComponent({
  props: ['title'],
  setup(props) {
    return () => (
      <div class="my-component">
        <h1>{props.title}</h1>
        <div id="content" pos={1}>Content here</div> {/* 静态和动态属性 */}
      </div>
    );
  }
});

⚖️ JSX 与 Template 的选择

了解它们各自的特点，有助于你做出合适的选择：

方面	JSX	Template（模板）
灵活性	高，可在模板中嵌入任意JavaScript逻辑	受限，主要依赖Vue指令（如`v-if`, `v-for`）
性能优化	运行时灵活性高，但Vue编译器的静态优化能力较弱	Vue编译器可进行静态标记优化（如静态提升、树结构打平），性能通常更优
学习曲线	熟悉React者更易上手，需了解JSX语法	需学习Vue特有指令，对新手更直观
适用场景	高度动态的组件，逻辑复杂的渲染	大部分Vue应用，结构固定的UI

🚀 实用提示

使用 .jsx 或 .tsx 文件 ：为了更好的语法高亮和工具支持，建议将使用JSX的组件保存在 .jsx (JavaScript) 或 .tsx (TypeScript) 文件中。若在 .vue 文件的 <script> 标签中使用JSX，可尝试设置 <script lang="jsx">。
配置 TypeScript ：如果项目使用TypeScript，需要在 tsconfig.json 中配置 jsx 选项。
json 复制代码
```
{
  "compilerOptions": {
    "jsx": "preserve"
  }
}
```

片段 (Fragment) ：JSX支持返回多个相邻的节点，而无需用一个额外的根节点包裹，只需使用空标签 <></>。

jsx 复制代码

export default defineComponent({
  setup() {
    return () => (
      <> {/* 这是一个片段 */}
        <div>Item 1</div>
        <div>Item 2</div>
      </>
    );
  }
});

💎 总结

在Vue 3中使用JSX，关键在于根据你的项目构建工具（Vite或Babel）进行正确配置。之后，你便可以享受JSX带来的JavaScript完全编程能力，尤其适用于构建复杂动态组件。对于大多数常规UI，Vue的模板语法因其性能和简洁性仍是首选。