关联精彩文章：# 改进tabs组件切换效果，丝滑的动画获得一致好评~

简介

会react的同学都知道，jsx非常灵活，写起来随心所欲！其实，vue3中也是可以支持JSX的！让我们花里胡哨起来吧！

为什么要在Vue 3中使用JSX？

JSX是一种语法糖，可以在JavaScript中编写类似HTML的代码，最初是由React引入的。使用JSX写vue的主要原因有以下几点：

为了花里胡哨 灵活性高：与模板语法相比，JSX允许你在模板中使用所有的JavaScript功能，这使得处理复杂的逻辑更加方便。
可组合性：JSX语法与Vue 3的组合式API（Composition API）非常契合，使得组件之间的组合和复用更加自然。

如何在Vue 3中使用JSX

配置项目

首先，需要我们的项目配置支持JSX的Babel插件。

安装必要的依赖：

npm install @vitejs/plugin-vue-jsx

配置 Vite：在vite.config.js中添加JSX插件：

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

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

现在，我们就可以愉快的在vue中写jsx了！

编写JSX组件

基础用法，变量用{}包裹即可。

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const handleClick = () => {
      console.log('Button clicked!');
    };

    return () => (
      <div>
        <h1>{props.msg}</h1>
        <button onClick={handleClick}>Click me</button>
      </div>
    );
  }
});

使用JSX组件

组件的用法是木有变化的！

// App.vue
<template>
  <div id="app">
    <HelloWorld msg="Hello Vue 3 with JSX!" />
  </div>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.jsx';
</script>

响应式数据

vue的一些属性什么的都是正常使用的，没有变化，比如：使用ref和reactive来创建响应式数据，并在JSX模板中使用它们

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return () => (
      <div>
        <p>数值: {count.value}</p>
        <button onClick={increment}>点我</button>
      </div>
    );
  }
});

条件渲染和列表渲染

和vue模板语法不同的时，条件渲染和列表渲染要使用JavaScript中的条件和循环语句来实现

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const items = [1, 2, 3, 4, 5];

    return () => (
      <div>
        {items.length > 0 ? (
        <ul>
          {items.map(item => (
          <li key={item}>{item}</li>
        ))}
        </ul>
      ) : (
        <p>No items available</p>
      )}
      </div>
    );
  }
});

事件处理

事件处理器可以直接在JSX标签中定义，名称与vue模板写法稍有区别

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const handleClick = () => {
      alert('Button clicked!');
    };

    return () => (
      <button onClick={handleClick}>Click me</button>
    );
  }
});

总结

在Vue 3中使用JSX提供了更高的灵活性和可读性，特别是在需要动态生成模板或在模板中使用复杂逻辑时。在开发组件库的时候，这种写法比较常见（我们公司组件库就是jsx写的），日常开发，感觉用的还是比较少！

在vue3中写JSX是一种什么体验？

简介