04｜模版语法和JSX语法：你知道Vue可以用JSX写吗？-Vue3企业级项目实战 - 码小课 - 程序员在线学习平台

当前位置:　首页>> 技术小册>> Vue3企业级项目实战

### 04｜模版语法和JSX语法：你知道Vue可以用JSX写吗？

在Vue.js的广阔生态中，模版语法（Template Syntax）一直是其标志性特征之一，它以简洁易读的HTML形式嵌入JavaScript逻辑，极大地提升了前端开发的效率和体验。然而，随着Vue 3的发布及其对TypeScript的增强支持，以及开发者对更灵活、更接近于原生JavaScript编写习惯的追求，JSX（JavaScript XML）作为另一种声明式UI编程范式，在Vue社区中也逐渐获得了越来越多的关注和应用。本章将深入探讨Vue中的模版语法与JSX语法的异同，并揭示如何在Vue项目中使用JSX。

#### 一、Vue模版语法基础

Vue的模版语法允许开发者在HTML模板中嵌入表达式（expressions）和指令（directives），以实现数据的动态绑定和逻辑的动态控制。这些特性使得Vue的模版既直观又强大。

- **插值表达式**：使用双大括号`{{ }}`包裹的表达式会被Vue视为JavaScript表达式，并计算其值然后插入到HTML中。例如，`{{ message }}`会被替换为`data`函数中`message`属性的值。

- **指令**：Vue中的指令以`v-`开头，用于提供模板内数据的绑定、事件监听、条件渲染等功能。例如，`v-bind`用于响应式地更新HTML属性，`v-model`用于在表单输入和应用状态之间创建双向数据绑定。

- **条件渲染与列表渲染**：Vue提供了`v-if`、`v-else-if`、`v-else`指令用于条件渲染，而`v-for`指令则用于基于一个数组来渲染一个列表。

- **事件处理**：Vue通过`v-on`指令（简写为`@`）监听DOM事件，并在触发时执行一些JavaScript代码。

#### 二、JSX简介与优势

JSX是一种JavaScript的语法扩展，允许你在JavaScript代码中写类似HTML的标记。它最初由React框架引入，但因其简洁性和灵活性，也被Vue等其他现代前端框架所采用或支持（通常通过插件或Babel转译器）。

- **更接近JavaScript**：JSX允许开发者在JavaScript代码中直接书写HTML结构，这使得逻辑和视图更加紧密地结合在一起，有助于提升代码的可读性和可维护性。

- **更灵活的表达式**：在JSX中，你可以直接嵌入任何有效的JavaScript表达式，而不需要像Vue模版中那样使用`{{ }}`或`v-bind`。

- **TypeScript友好**：对于使用TypeScript的开发者而言，JSX提供了更好的类型支持和自动补全，有助于减少类型错误。

- **组件化更加彻底**：JSX使得组件的封装更加彻底，因为组件的JSX结构、逻辑和样式都可以定义在同一个文件中，有利于组件的复用和维护。

#### 三、Vue中使用JSX

虽然Vue官方推荐使用模版语法，但Vue 3通过插件或Babel配置也可以轻松支持JSX。以下是在Vue项目中使用JSX的基本步骤：

1. **安装相关依赖**：
   如果你使用Vue CLI创建的项目，可能需要安装`@vue/babel-plugin-jsx`或类似插件来支持JSX。对于Vite等现代构建工具，通常已经内置了对JSX的支持，或者可以通过添加相应的插件来实现。

```bash
   npm install @vue/babel-plugin-jsx --save-dev
   ```

或在`.babelrc`、`babel.config.js`中配置：

```json
   {
     "plugins": ["@vue/babel-plugin-jsx"]
   }
   ```

2. **编写JSX组件**：
   在Vue组件中，你可以将`template`部分替换为`render`函数，该函数返回JSX代码。Vue 3的`h`函数是创建虚拟DOM节点的关键，它类似于React的`React.createElement`。

```javascript
   import { defineComponent, h } from 'vue';

export default defineComponent({
     name: 'MyComponent',
     props: {
       message: String
     },
     render() {
       return <div>{this.message}</div>;
     }
   });
   ```

注意，在JSX中，你需要使用`this`来访问组件的props、data等。但Vue 3推荐使用`setup`函数配合Composition API，此时可以使用`setup`函数的参数直接访问props，并通过`return`返回响应式状态和函数，然后在`render`函数中使用它们。

3. **使用Composition API与JSX**：
   当使用Composition API时，你可以更灵活地组织你的逻辑，并将它们与JSX结合使用。

```javascript
   import { defineComponent, h, ref } from 'vue';

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

function increment() {
         count.value++;
       }

return () => <button onClick={increment}>{count.value}</button>;
     }
   });
   ```

注意，在`setup`函数中返回的应该是一个渲染函数，该函数返回一个JSX表达式。由于`setup`函数不支持直接访问`this`，所有props、state和methods都需要通过`setup`函数的参数或返回值来传递。

4. **样式与JSX**：
   在JSX中，你可以通过内联样式（类似React的`style`属性）或类名（类似Vue的`class`或`className`，取决于你的配置）来应用CSS样式。

```javascript
   return <div style={{ color: 'red', fontSize: '20px' }}>Hello, JSX in Vue!</div>;
   // 或
   return <div className="my-class">Hello, JSX in Vue!</div>;
   ```

#### 四、模版语法与JSX的选择

选择模版语法还是JSX，主要取决于个人或团队的偏好、项目需求以及现有的技术栈。模版语法因其直观性和易于上手，在Vue社区中仍然占据主导地位。然而，对于需要更高灵活性、更接近于原生JavaScript编写习惯的开发者来说，JSX无疑是一个值得考虑的选择。

- **模版语法**适合那些喜欢HTML式模板、追求快速开发和直观性的开发者。
- **JSX**则更适合那些希望代码更加灵活、类型支持更强、或者从React等其他框架迁移过来的开发者。

无论选择哪种方式，Vue都提供了强大的工具和生态系统来支持你的开发需求。重要的是，了解并熟悉这两种语法，以便根据项目的具体情况和团队的技术栈做出最佳的选择。