Vue 3源码极客之：`Vue`的`JSX/TSX`编译：如何将`JSX`转换成`Vue`的`render function`。

各位靓仔靓女，欢迎来到今天的“Vue 3 源码极客之 JSX/TSX 编译：如何将 JSX 转换成 Vue 的 render function” 讲座！ 我是你们的老朋友，今天就带大家一起扒一扒 Vue 3 里面 JSX/TSX 编译的那些事儿，保证让你们听完之后，不仅能用 JSX/TSX 撸代码，还能知道它背后是怎么运作的，成为真正的 “懂王”！

一、 啥是 JSX/TSX？为啥 Vue 要支持它？

首先，咱们得搞清楚，JSX/TSX 是个啥玩意儿？

简单来说，JSX 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码里写 HTML 标签。 比如：

const element = <h1>Hello, JSX!</h1>;

TSX 呢，就是 JSX 加上了 TypeScript 的类型检查，让你的代码更健壮。

那为啥 Vue 要支持 JSX/TSX 呢？ 原因很简单，就是为了让开发者更爽！

• 代码可读性更高： JSX 让你直接在 JS 代码里写 HTML 结构，一目了然，不用像 template 那样，还得跳来跳去。
• 组件化更方便： JSX 可以很方便地创建和组合组件，让你的代码更模块化。
• 类型安全： TSX 配合 TypeScript，可以提供更好的类型检查，减少运行时错误。
• 与 React 生态兼容： 很多前端开发者都熟悉 React 的 JSX 语法，Vue 支持 JSX/TSX 可以降低他们的学习成本。

二、 JSX/TSX 编译器的作用：从 JSX 到 render function

OK， 知道 JSX/TSX 的好处了，但是浏览器可不认识 JSX/TSX 啊！ 浏览器只能解析 JavaScript，所以我们需要一个编译器，把 JSX/TSX 转换成浏览器可以理解的 JavaScript 代码。

这个编译器，就是 JSX/TSX 编译器。 它的主要作用就是把 JSX/TSX 代码转换成 Vue 的 render function。

render function 是啥？ 简单来说，就是一个函数，它返回一个 VNode (Virtual DOM Node)，Vue 通过 VNode 来描述页面的结构。

所以，JSX/TSX 编译器的核心任务就是：

JSX/TSX -> render function -> VNode

三、 Vue 3 中的 JSX/TSX 编译过程：一步一步来

Vue 3 使用了 @vue/babel-plugin-jsx 这个 Babel 插件来处理 JSX/TSX 编译。 接下来，我们就来一步一步看看它是怎么工作的。

1. Babel 解析 JSX/TSX 代码：

   Babel 首先会解析你的 JSX/TSX 代码，把它转换成一个抽象语法树 (AST)。 AST 就是代码的一种树状表示形式，方便编译器进行分析和转换。

   比如，对于下面的 JSX 代码：

   const element = <div id="app">Hello, {name}!</div>;

   Babel 会生成一个 AST， 描述了这个 div 元素，它的属性 id 和子节点。

2. @vue/babel-plugin-jsx 转换 AST：

   @vue/babel-plugin-jsx 会遍历 AST，找到 JSX 相关的节点，然后进行转换。 它的主要工作包括：

   • 处理标签名： 把 JSX 标签名转换成 Vue 的组件或 HTML 标签。
   • 处理属性： 把 JSX 属性转换成 Vue 的 props 或 attributes。
   • 处理子节点： 把 JSX 子节点转换成 Vue 的 VNode 子节点。
   • 生成 _createElementVNode 调用： 把所有转换后的信息，组合成一个 _createElementVNode 函数的调用。

   _createElementVNode 是 Vue 3 内部的一个函数，它负责创建 VNode。

   简单来说，@vue/babel-plugin-jsx 会把上面的 JSX 代码转换成类似下面的 JavaScript 代码：

   import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString } from 'vue'
   
   const element = _createElementVNode("div", { id: "app" }, "Hello, " + _toDisplayString(name) + "!", 1 /* HOISTED */)

   注意：_createElementVNode 函数的参数顺序是：

   _createElementVNode(type, props, children, patchFlag, dynamicProps)

   • type: 标签名或组件。
   • props: 属性。
   • children: 子节点。
   • patchFlag: 一个数字，表示 VNode 的类型，用于优化更新。
   • dynamicProps: 一个数组，表示动态属性。

3. 生成 render function：

   最后，@vue/babel-plugin-jsx 会把转换后的代码，包装成一个 render function。 这个 render function 会返回一个 VNode，描述了页面的结构。

   比如，对于上面的 JSX 代码，@vue/babel-plugin-jsx 可能会生成类似下面的 render function:

   import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString } from 'vue'
   
   export function render(_ctx, _cache, $props, $setup, $data, $options) {
     return (_createElementVNode("div", { id: "app" }, "Hello, " + _toDisplayString(_ctx.name) + "!", 1 /* HOISTED */))
   }

   这个 render function 接收一些参数，比如 _ctx (组件的上下文)，_cache (缓存)，$props (props)，$setup (setup 函数返回的值)，$data (data)，$options (options)。 然后，它会调用 _createElementVNode 创建一个 VNode，并返回这个 VNode。

四、 JSX/TSX 编译的细节：一些关键点

上面我们讲了 JSX/TSX 编译的大概流程，接下来我们再深入一些，看看一些关键的细节。

1. 处理组件：

   JSX 编译器会区分 HTML 标签和 Vue 组件。 如果标签名是一个大写字母开头的，那么它会被认为是一个 Vue 组件。

   比如：

   <MyComponent />

   JSX 编译器会把 MyComponent 转换成一个组件的 VNode。

2. 处理事件：

   JSX 编译器会把 onXXX 属性转换成 Vue 的事件监听器。

   比如：

   <button onClick={handleClick}>Click me</button>

   JSX 编译器会把 onClick 转换成一个事件监听器，当按钮被点击时，会执行 handleClick 函数。

3. 处理指令：

   Vue 的指令 (比如 v-if, v-for) 在 JSX/TSX 中没有直接的语法支持。 但是，你可以通过一些技巧来实现类似的功能。

   • v-if： 可以使用三元运算符或条件渲染来实现。

     {condition ? <ComponentA /> : <ComponentB />}

   • v-for： 可以使用 map 函数来遍历数组。

     {items.map(item => <Item key={item.id} item={item} />)}

4. Fragment：

   Fragment 允许你返回多个根节点，而不需要一个额外的父节点。 在 JSX/TSX 中，可以使用 <> 和 </> 来表示 Fragment。

   <>
     <h1>Title</h1>
     <p>Content</p>
   </>

5. Suspense：

   Suspense 组件允许你在等待异步组件加载完成时，显示一个 fallback 内容。 在 JSX/TSX 中，可以直接使用 <Suspense> 组件。

   <Suspense fallback={<div>Loading...</div>}>
     <AsyncComponent />
   </Suspense>

五、 TSX 的类型检查：让你的代码更健壮

TSX 最大的优势就是它的类型检查功能。 通过 TypeScript，你可以为你的组件定义 props 的类型，从而避免运行时错误。

比如：

interface Props {
  name: string;
  age: number;
}

const MyComponent: React.FC<Props> = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You are {props.age} years old.</p>
    </div>
  );
};

在这个例子中，我们定义了一个 Props 接口，它描述了 MyComponent 组件的 props 的类型。 如果我们在使用 MyComponent 组件时，传递了错误的 props 类型，TypeScript 就会报错。

六、 使用 JSX/TSX 的一些技巧和最佳实践

• 使用 ESLint 和 Prettier： ESLint 和 Prettier 可以帮助你保持代码风格的一致性，并发现潜在的错误。
• 使用 TypeScript： 如果你的项目比较复杂，强烈建议使用 TypeScript，它可以提供更好的类型检查，让你的代码更健壮。
• 合理使用 key： 在使用 v-for 时，一定要为每个元素指定一个唯一的 key 属性，这可以帮助 Vue 更好地更新 DOM。
• 避免过度使用 JSX： 虽然 JSX 很方便，但是也不要过度使用它。 对于一些简单的模板，使用 template 语法可能更简洁。
• 了解 Vue 的渲染机制： 深入了解 Vue 的渲染机制，可以帮助你写出更高效的 JSX/TSX 代码。

七、 总结：从入门到入土（误）

今天我们一起学习了 Vue 3 中 JSX/TSX 编译的原理和实践。 我们从 JSX/TSX 的概念讲起，然后深入到编译器的内部，一步一步地分析了 JSX/TSX 代码是如何被转换成 Vue 的 render function 的。 最后，我们还分享了一些使用 JSX/TSX 的技巧和最佳实践。

希望今天的讲座能帮助大家更好地理解 Vue 3 中的 JSX/TSX 编译，让大家在实际开发中更加得心应手。

以下是一个表格，总结了 JSX/TSX 编译的关键步骤和涉及的知识点:

步骤	描述	涉及的知识点
1. Babel 解析 JSX/TSX	Babel 将 JSX/TSX 代码解析为抽象语法树 (AST)。	– Babel 的工作原理
2. 插件转换 AST	@vue/babel-plugin-jsx 遍历 AST，将 JSX/TSX 节点转换为 Vue 的 _createElementVNode 函数调用。	– AST 遍历和修改
	主要转换包括： – 处理标签名： 区分 HTML 标签和 Vue 组件。 – 处理属性： 将 JSX 属性转换为 Vue 的 props 或 attributes。 – 处理子节点： 将 JSX 子节点转换为 Vue 的 VNode 子节点。 – 生成 _createElementVNode 调用： 将所有转换后的信息组合成一个 _createElementVNode 函数的调用。	– Vue 的组件概念 – Vue 的 props 和 attributes – Vue 的 VNode 结构 – _createElementVNode 函数的参数
3. 生成 render function	将转换后的代码包装成一个 render function，该函数返回一个 VNode。	– Vue 的 render function 概念 – VNode 的创建和描述
类型检查 (TSX)	TSX 允许使用 TypeScript 为组件定义 props 的类型，从而提供类型安全。	– TypeScript 的类型定义 – React.FC (Function Component) 类型

好了，今天的讲座就到这里。 感谢大家的收听，希望大家都能成为 Vue 3 源码的 “懂王”！ 如果大家有什么问题，欢迎在评论区留言，我会尽力解答。

下次再见！