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

1,082 阅读2分钟

关联精彩文章:# 改进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的一些属性什么的都是正常使用的,没有变化,比如:使用refreactive来创建响应式数据,并在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写的),日常开发,感觉用的还是比较少!