Vue 3源码极客之：`Vue`的`JSX/TSX`：`@vue/babel-plugin-jsx`的实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊Vue 3里那个让人又爱又恨的JSX/TSX，以及它背后的功臣——@vue/babel-plugin-jsx。别害怕，虽然听起来高大上，但咱们会用最接地气的方式把它扒个精光。

开场白：JSX/TSX，你真的了解吗？

首先，我们要明确一个概念：JSX/TSX 并不是 Vue 独有的，它最早来自 React。简单来说，它们是一种在 JavaScript/TypeScript 代码中编写 HTML 结构的语法糖。

JSX: JavaScript XML，顾名思义，就是用 XML 的形式来写 JavaScript。
TSX: TypeScript XML，则是 JSX 的 TypeScript 版本，增加了类型检查。

在 Vue 中使用 JSX/TSX，我们可以直接在组件的 render 函数里写 HTML 标签，而不用像以前那样使用模板字符串或者 h 函数。

为什么要用 JSX/TSX？

这个问题就好比，为什么要用汽车而不是马车？各有优缺点，看你具体需求。

特性	JSX/TSX	模板 (Template)
灵活性	非常灵活，可以使用完整的 JavaScript/TypeScript 表达式。	相对有限，只能使用 Vue 提供的指令和语法。
类型安全	TSX 提供了完整的类型检查，可以避免很多运行时错误。	模板只能在运行时进行类型推断，容易出错。
代码组织	更容易将复杂逻辑组织成函数或组件，代码可读性更高。	当逻辑复杂时，模板会变得难以维护。
性能	理论上性能更好，因为直接生成 VNode，省去了模板解析的过程。（实际差距很小，可以忽略）	模板需要经过解析和编译才能生成 VNode。
学习成本	较高，需要熟悉 JavaScript/TypeScript 和 JSX/TSX 语法。	较低，Vue 模板语法简单易学。

总的来说，如果你需要更高的灵活性、类型安全和代码组织能力，那么 JSX/TSX 是一个不错的选择。但如果你追求简单易用，那么 Vue 模板可能更适合你。

正题：@vue/babel-plugin-jsx 的工作原理

好了，铺垫了这么多，终于要进入正题了。@vue/babel-plugin-jsx 是一个 Babel 插件，它的作用是将 JSX/TSX 代码转换成 Vue 的 h 函数调用。

简单来说，就是把这种代码：

const MyComponent = {
  render() {
    return (
      <div>
        <h1>Hello, JSX!</h1>
        <button onClick={() => console.log('Clicked!')}>Click me</button>
      </div>
    );
  }
};

转换成这种代码：

import { h } from 'vue';

const MyComponent = {
  render() {
    return h('div', null, [
      h('h1', null, 'Hello, JSX!'),
      h('button', { onClick: () => console.log('Clicked!') }, 'Click me')
    ]);
  }
};

是不是感觉有点像魔法？其实原理并不复杂，让我们一步步来分析。

1. Babel 的基本概念

要理解 @vue/babel-plugin-jsx，首先要了解 Babel 的基本概念。Babel 是一个 JavaScript 编译器，它可以将 ES6+ 代码转换成 ES5 代码，让你的代码可以在旧版本的浏览器上运行。

Babel 的工作流程大致如下：

Parse (解析): 将源代码解析成抽象语法树 (AST)。AST 是一种树形结构，它表示了代码的语法结构。
Transform (转换): 使用插件对 AST 进行转换，例如将 JSX 转换成 h 函数调用。
Generate (生成): 将转换后的 AST 生成新的代码。

@vue/babel-plugin-jsx 就是一个 Babel 插件，它负责在 Transform 阶段将 JSX/TSX 转换成 Vue 的 h 函数调用。

2. @vue/babel-plugin-jsx 的核心逻辑

@vue/babel-plugin-jsx 的核心逻辑可以概括为以下几点：

识别 JSX 元素: 插件会遍历 AST，找到所有的 JSX 元素。JSX 元素以 < 开头，以 > 结尾。
转换 JSX 元素: 将 JSX 元素转换成 h 函数调用。h 函数是 Vue 的虚拟 DOM 创建函数，它接受三个参数：
- tag: 元素的标签名，例如 'div'、'h1' 或组件的构造函数。
- props: 元素的属性，例如 { onClick: () => console.log('Clicked!') }。
- children: 元素的子节点，可以是字符串、数字或其他 VNode。
处理 JSX 属性: 将 JSX 元素的属性转换成 h 函数的 props 参数。
处理 JSX 子节点: 将 JSX 元素的子节点转换成 h 函数的 children 参数。

3. 关键代码片段分析

为了更深入地理解 @vue/babel-plugin-jsx 的工作原理，我们来看一些关键的代码片段（简化版）：

isJSX(node): 判断一个节点是否是 JSX 元素。

function isJSX(node) {
  return node && node.type === 'JSXElement';
}

transformJSXElement(path, state): 转换 JSX 元素。

function transformJSXElement(path, state) {
  const tag = path.node.openingElement.name;
  const props = transformJSXAttributes(path.node.openingElement.attributes);
  const children = transformJSXChildren(path.node.children);

  const h = state.importSource ? { type: 'Identifier', name: 'h' } : state.opts.pragma || { type: 'Identifier', name: '_h' };

  path.replaceWith(
    {
      type: 'CallExpression',
      callee: h,
      arguments: [
        tag,
        props,
        {
          type: 'ArrayExpression',
          elements: children
        }
      ]
    }
  );
}

这段代码做了以下几件事：

获取 JSX 元素的标签名、属性和子节点。
构建 h 函数的调用表达式。
用 h 函数调用表达式替换原来的 JSX 元素。

transformJSXAttributes(attributes): 转换 JSX 属性。

function transformJSXAttributes(attributes) {
  const props = {};
  for (const attribute of attributes) {
    if (attribute.type === 'JSXAttribute') {
      const name = attribute.name.name;
      const value = attribute.value;
      props[name] = value;
    }
  }
  return {
      type: 'ObjectExpression',
      properties: Object.entries(props).map(([key, value]) => ({
          type: 'ObjectProperty',
          key: { type: 'Identifier', name: key },
          value: value,
          computed: false,
          shorthand: false
      }))
  };
}

这段代码将 JSX 属性转换成一个 JavaScript 对象，作为 h 函数的 props 参数。

transformJSXChildren(children): 转换 JSX 子节点。

function transformJSXChildren(children) {
  return children.map(child => {
    if (child.type === 'JSXText') {
      return { type: 'StringLiteral', value: child.value };
    } else if (isJSX(child)) {
      // 递归处理 JSX 元素
      return transformJSXElement({ node: child }, {}); //Simplified version, needs full path and state
    } else {
      return child; //Already transformed
    }
  });
}

这段代码将 JSX 子节点转换成一个 JavaScript 数组，作为 h 函数的 children 参数。如果子节点是 JSX 元素，则递归调用 transformJSXElement 函数进行处理。

4. 配置 @vue/babel-plugin-jsx

要使用 @vue/babel-plugin-jsx，需要在你的 Babel 配置文件（例如 .babelrc.js 或 babel.config.js）中添加以下配置：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/babel-preset-jsx' // Or '@babel/preset-typescript' if you are using TSX
  ],
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
};

或者使用更简单的写法 (假设已经安装了 @vue/cli-plugin-babel):

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
};

如果你使用的是 TypeScript，还需要安装 @babel/preset-typescript 并将其添加到 presets 数组中。

你还可以通过 opts 对象来配置 @vue/babel-plugin-jsx 的行为，例如：

pragma: 指定 h 函数的名称。默认值为 _h。
pragmaFrag: 指定 Fragment 组件的名称。默认值为 Fragment。
transformOn: 是否转换 on 开头的属性为事件监听器。默认值为 true。
optimize: 实验性功能，通过静态分析优化 JSX 代码。默认值为 false。

例如：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@vue/babel-preset-jsx'
  ],
  plugins: [
    ['@vue/babel-plugin-jsx', {
      pragma: 'h',
      pragmaFrag: 'MyFragment',
      transformOn: false
    }]
  ]
};

5. TSX 的特殊处理

TSX 是 JSX 的 TypeScript 版本，它增加了类型检查。@vue/babel-plugin-jsx 对 TSX 也有一些特殊的处理：

类型推断: 插件会根据 JSX 元素的属性和子节点推断出 VNode 的类型。
类型检查: 插件会根据 TypeScript 的类型定义检查 JSX 代码是否符合类型规范。

要使用 TSX，需要安装 @babel/preset-typescript 并将其添加到 presets 数组中。同时，还需要配置 TypeScript 编译器，告诉它如何处理 TSX 文件。

6. 一些使用技巧和注意事项

避免过度使用 JSX/TSX: 虽然 JSX/TSX 很灵活，但过度使用可能会导致代码可读性降低。
合理组织代码: 将 JSX/TSX 代码组织成函数或组件，可以提高代码可读性和可维护性。
注意性能优化: 避免在 JSX/TSX 中进行复杂的计算，以免影响性能。
使用 Fragment 组件: 当你需要返回多个根节点时，可以使用 Fragment 组件。

总结：JSX/TSX，用好了是神器，用不好是负担

总而言之，@vue/babel-plugin-jsx 是一个非常强大的工具，它可以让你在 Vue 中使用 JSX/TSX 语法，提高开发效率和代码质量。但是，JSX/TSX 也有一些缺点，需要谨慎使用。

记住，没有银弹，只有最适合你的工具。希望今天的讲解能帮助你更好地理解 @vue/babel-plugin-jsx 的工作原理，并在实际项目中灵活运用。

好了，今天的讲座就到这里，感谢大家的观看！我们下次再见！

发表回复 取消回复

发表回复取消回复