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的基本步骤：

安装相关依赖：
如果你使用Vue CLI创建的项目，可能需要安装@vue/babel-plugin-jsx或类似插件来支持JSX。对于Vite等现代构建工具，通常已经内置了对JSX的支持，或者可以通过添加相应的插件来实现。
```
npm install @vue/babel-plugin-jsx --save-dev
```
或在.babelrc、babel.config.js中配置：
```
{
  "plugins": ["@vue/babel-plugin-jsx"]
}
```
编写JSX组件：
在Vue组件中，你可以将template部分替换为render函数，该函数返回JSX代码。Vue 3的h函数是创建虚拟DOM节点的关键，它类似于React的React.createElement。
```
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函数中使用它们。
使用Composition API与JSX：
当使用Composition API时，你可以更灵活地组织你的逻辑，并将它们与JSX结合使用。
```
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函数的参数或返回值来传递。
样式与JSX：
在JSX中，你可以通过内联样式（类似React的style属性）或类名（类似Vue的class或className，取决于你的配置）来应用CSS样式。
```
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都提供了强大的工具和生态系统来支持你的开发需求。重要的是，了解并熟悉这两种语法，以便根据项目的具体情况和团队的技术栈做出最佳的选择。