探索 Vue 3 中的 JSX

Hello, world!

;

这里的 JSX 语法编译之后其实就是：

import { createVNode as _createVNode } from “vue”

_createVNode(“h1”, null, “Hello, world!”);

5. Vue 3 带来的改变

===============

Vue 2 早期是用纯 JavaScript 来编写的，随着项目越来越庞大，引入了 Facebook 的 Flow[3]。虽然 Flow 在一定程度上起到了帮助作用，但还是存在一些问题，尤大也曾经公开表示当初没有选择 TypeScript 选择了 Flow 是「押错宝」了。

在 Vue 2 中，JSX 的编译需要依赖 @vue/babel-preset-jsx 和 @vue/babel-helper-vue-jsx-merge-props 这两个包。前面这个包来负责编译 JSX 的语法，后面的包用来引入运行时的 mergeProps 函数。

但是如果你要用 TSX 的环境来写，还需要额外安装 vue-tsx-support[4]。

在 Vue 3 中，只要安装一个 Babel 插件就完事了，可以理解为不再需要额外的第三方库，源码中就有 jsx.d.ts[5] 用来支持 JSX 的类型检查

6. 使用 JSX 的场景

==============

我们现在来看下有哪些场景用 JSX 会比模板更加优雅。

6.1 一个文件写多个组件

---

一个 .vue 文件里面只能写一个组件，这个说实话在一些场景下还是不太方便，很多时候我们写一个页面的时候其实可能会需要把一些小的节点片段拆分到小组件里面进行复用，这些小组件其实写个简单的函数组件就能搞定了。如果你现在没有这个习惯可能就是因为 SFC 的限制让你习惯了全部写在一个文件里面。

比如这里我们封装了一个 Input 组件，我们希望同时导出 Password 组件和 Textarea 组件来方便用户根据实际需求使用，而这两个组件本身内部就是用的 Input 组件，只是定制了一些 props。在 JSX 里面就很方便，写个简单的函数组件基本上就够用了，通过 interface 来声明 props 就好了。但是如果是用模板来写，可能就要给拆成三个文件，或许还要再加一个 index.js 的入口文件来导出三个组件，摸鱼的时间又少了。

6.2 强依赖编译时的检查

---

模板中引用了一个未在 script 中声明的 a，vscode 插件可以帮忙检查出来，但是仍然可以跑起来。