一文详解如何在Vue3+Vite中使用JSX

下面我将详细讲解如何在Vue3+Vite中使用JSX。

什么是JSX？

JSX是一种JavaScript的语法扩展，它允许你在JavaScript中编写类似于HTML的代码。JSX可以让我们在Vue3中更直观地编写组件的模板，与Vue2的模板语法相比，更加灵活高效。

如何在Vue3中使用JSX？

安装依赖

首先，我们需要安装@vue/babel-plugin-jsx和@vue/cli-plugin-babel依赖，使用以下命令：

npm install --save-dev @vue/babel-plugin-jsx @vue/cli-plugin-babel

配置Babel插件

接下来，我们需要在babel.config.js文件中配置@vue/babel-plugin-jsx插件，代码如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['@vue/babel-plugin-jsx', { 
      compositionAPI: true 
    }]
  ]
}

其中，compositionAPI为true时表示开启Vue3的Composition API，可以让我们使用setup()函数编写组件逻辑。

创建组件

在Vue3中，我们可以使用JSX语法编写组件的模板。例如，以下代码是一个简单的Vue3组件，它使用了JSX语法：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    return () => (
      <div>
        <h1>Hello World</h1>
        <p>This is a Vue3 component written in JSX.</p>
      </div>
    )
  }
})

组件的模板是return后的箭头函数，它会返回一个JSX表达式，表示组件的DOM结构。在Vue3的setup()函数中，我们可以使用JSX语法编写组件的模板，返回的值为一个render函数。

使用组件

使用JSX编写的Vue3组件，可以像普通组件一样，通过模板语法或者render函数在其他组件中使用。

下面是一个示例，在App.vue组件中引入HelloWorld组件：

import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld';

export default defineComponent({
  name: 'App',
  setup() {
    return () => (
      <div>
        <HelloWorld />
      </div>
    )
  }
})

在这个示例中，我们在setup()函数中返回一个箭头函数，表示App组件的模板，其中包含了一个使用JSX编写的HelloWorld组件。

示例1：使用JSX编写TodoList组件

下面是一个使用JSX编写的TodoList组件示例代码，代码较长，但是具有很好的可读性和灵活性：

import { defineComponent, ref, onMounted, computed } from 'vue';

export default defineComponent({
  name: 'TodoList',
  setup() {
    const todoList = ref([]);
    const todoText = ref('');

    const addTodo = () => {
      todoList.value.push({ text: todoText.value, done: false });
      todoText.value = '';
    };

    const toggleTodo = (todo) => {
      todo.done = !todo.done;
    };

    const remaining = computed(() => {
      return todoList.value.filter(todo => !todo.done).length;
    });

    onMounted(() => {
      todoList.value = [
        { text: 'Learn Vue3', done: false },
        { text: 'Write code', done: false },
        { text: 'Build project', done: false }
      ]
    });

    return () => (
      <div>
        <h2>Todo List</h2>

        <ul>
          {todoList.value.map(todo => (
            <li>
              <label onClick={() => toggleTodo(todo)}>
                <input type="checkbox" checked={todo.done} />
                {todo.text}
              </label>
            </li>
          ))}
        </ul>

        <div>
          <input v-model={todoText.value} />
          <button onClick={addTodo}>Add</button>
        </div>

        <p>Remaining: {remaining.value}</p>
      </div>
    )
  }
})

在这个示例中，我们使用了Vue3的Composition API编写了一个TodoList组件，同时使用了JSX语法编写了组件的模板。在setup()函数中，我们使用了ref()和computed()函数声明了一些响应式变量和计算属性，用于管理TodoList的数据和状态。

在组件的模板中，我们使用了JSX语法来动态渲染TodoList的DOM结构。我们使用了v-for指令和map()函数来遍历todoList的内容，在li元素中显示todo的text和done状态。我们也使用了v-model指令来实现实时双向数据绑定，以便在输入框中输入新的todo。

整个TodoList组件的代码逻辑清晰，应用了Vue3的响应式机制和JSX的灵活性，使得代码更加易读易懂。

示例2：使用JSX编写Counter组件

下面是一个使用JSX编写的Counter组件示例代码，代码较短，但是也充分展示了JSX的优势：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Counter',
  setup() {
    const count = ref(0);

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

    return () => (
      <div>
        <h2>Counter: {count.value}</h2>
        <button onClick={increment}>+</button>
      </div>
    )
  }
})

在这个示例中，我们同样使用了Vue3的Composition API编写了一个Counter组件，并使用了JSX语法编写了组件的模板。在setup()函数中，我们使用了ref()函数声明了一个响应式变量count，用于管理计数器的状态。

在组件的模板中，我们使用了JSX语法来动态渲染Counter的DOM结构。我们在h2元素中显示了当前计数器的值，同时在button元素中绑定了一个点击事件处理函数increment()，用于实现计数器的自增功能。

整个Counter组件的代码非常简单，用最少的代码实现了计数器的功能，同时充分展示了JSX的灵活性和搭配Vue3的优雅。