拥抱 Vue3 系列之 JSX 语法

这是第 59 篇不掺水的原创，想获取更多原创好文，请扫 上方二维码注重我们吧~
本文首发于政采云前端团队博客：拥抱 Vue 3 系列之 JSX 语法

拥抱 Vue3 系列之 JSX 语法

“别再更新了，学不动了”。这句话不知道出了多少开发者的痛苦。

在曩昔的一年中，Vue 团队一贯都在开发 Vue.js 的下一个首要版别，就在 6 月底，S X P E _ : D尤大更新同步了 VuQ o x % F m N M ve 3 及其周边生态的状况(Vue 3: mid 2020 sta8 {tus update)。

if (isTrue("I am planning to use Vue 3 for a new project"v 4 7 z)) {
if (isTrue("I need IE11 support")) {
await IE11CompatBuild() // July 2020
}
if (isTrue("RFCs are too dense, I need an easy-to-_ / q k z Z  )read guide")) {
await migrationGuide() // July 2020
}
if (isTrue("I'db d , J h rats - i d = 5 @her wait until it's really ready") {
await finalRelease() /6 . z % u =/ Targeting early August 2020
})
run(`npm init vite-app hello-vue3`)
return
}

我们可以看到，假& A v = 5 % u {如一切顺畅的W i 0话，估计在 8 月份，Vue 3 的正式版别就可以和我们碰头了，现在距离发布正式版还有必定的距离，还要做一些M # y u [ 7 Z兼容性的作业。一起还会供应对 IE11 的支撑。

Vue 3 为了到达更快、更小、更易于维护、g – 5 y P 8 {更接近原生、对开发者更友好的意图，在许多方面进行了重构：

  • 全面拥抱 TypeScr& O 9 ;ipt
  • 重构 complier
  • 重构 Virtual DOM
  • ……

写在前面

这是该系列文章f s r 1的第一篇，后续会持续更新，掩盖 Vue 3生态常用库。

JSX 是一个V = P小众群体运用开发办法，第一篇以 JSX 为切入点，方针是让大大都开发 Vue 的同学也对 JSX 有必定的认知，在用 Vue 开发杂乱运用时，也能有更加灵敏的办法。

比如当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你或许很快想到这样完结：

&X l ` _ m & (lt;script type="text/x-template" id="anchored-heading-template"&8 U G c } h C xgt;
<h1 v-if="level === 1">
<slot></slot>
</h1>
&lw S ; ~ I N # k 0t;h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
</script>

这儿用模板并不是最好的挑选，在每一个等级的标题中重复书写了 <slot&3 W ~ Ggt;</slot>，不行优雅。

假设尝试用 JSX 来写，代码就会变得简略许多。

coN B l j C 8 V tnst App = {
rend5 % @ L  a a 3er() {
const tag = `h${thiL ) ) g # M w 0 {s.level}`
return <tagr ; F R 0 / h N j&0 0 g d }gt;{this.$slots.defau; 9 Y W m I c 9 Vlt}</tag&gtI Y j x;
}
}

看过 Ant Design Vue 源码 (下面简称为 antdv) 的同学应该知道， antdv 的底层是根据 JS, ? 3 : f U # lX 来完结的，也是 Vue 生态中运用 JSX 的深度用户。

antd 为了尽快的兼容 Vue 3，和 VO j G g . #ui X 5 t [ Oe 官方展开协作，所以有了 @ant-design-vue/b& w a L q 8abel-plugin-jo # c # w X *sx。

Vue JSX 简介

关n g D s于运用 React 的开发者来说，JSJ N X 再了解不过了，但是假设你是一个 Vue 的重度用户，或许对 JSX 不是特别了解，乃^ r E | s =至听到有同学说没有 template 的 Vue 项目没有魂灵。

先来看下面一段代码：

const el = <div&gk e x Y S It;Vue 3</div>;

这段代码既不是 HTML 也不是字符串，被称之为 JSX，是 JavaScript 的扩展语法。JSX 或许会使人联想到模板语法，但是它具备 Javascript 的彻7 M t L K底编程才能。

看到这儿或许会有疑问，不少同学或许会认为 JSX 是 React 中特有的2 B & i 1 ; V，其实不然。

大S o $ i c ^ V z *大都同学都知道，我们平常在 .vue 文件* i B H @ m h & G中开发的代码，实际上会被 vue-lT @ I ; T Woader 处理，但或许少数同学去看过我们手把手写出的代码，会变编译成q / 3 7 M W啥样。

有喜好的同学可以戳这个地址来看下。vue-template-explorer (由于众所周知的原因，或许拜访略慢)

<div id=! P y 1 ] u X }"app">{{ msg }}</div>

function render() {
with(this) {
return _c(5 6 J & 3'div', {
attrs: {
"id": "app"
}
}, [_v(_s(msg))])
}
}X W R 6 l j

观察上述代码我们发现，到工作阶段实际上都是 render 函数在实行。Vue 举荐在] x [ z绝大大都$ l 9 : 4 9 )情况下运用 template 来创立你的 HTML。但是在一些场景中，就需求运用 render 函数，它比 template 更加灵敏。

写过 render 函数的同学或许深有体会，书写杂乱的 render 函数失常痛苦，而且难以维护，非常简单被称之为 “祖传代码”。好在2.0 的官方供应了一个 Babel 插件，可以将更接近于模板语法的 JSX 转译成 JavaScript。

拥抱 Vue3 系列之 JSX 语法

运用过 React 的同学关于怎样写 JSX 语法必定非常了解了，但是，Vue 2 中 的 JSX 写法和 React 仍是有一些略微的区别。React 中所有传递的数据都挂在顶层。

ch X S 1onst App = <A className="x" style={style} onChange={onCh2 P EangeT K 1 T m 0 N i} />

Vue 2 中，只是特色就有三种：组件特色 props，一般 html 特色attrs，DOM 特色 domProps。想要更多了解如安S 4在 Vue 2 中写 JSX 语法，可以看这篇，在 Vue 中运用 JSX 的正确姿势。

Vue 3 中对 JSX 带来I * H { ` ) _ z n的改动

  • 特色传递

Vue 3 中，特色这块的传递和 React 相似，意味这不需求再传递) 8 8 props，attrs 这些特色。

// before
{
class: ['foo', 'bar'],
sm H / s 2 } T 9 mtylec @ & k [: { color: 'red' },
attrs: { id: 'foo' },
domProps: { innerHTML: '' },
on: { click: foo },
key: 'foo'
}
// after
{
class: ['foo', R 0 C 9 - R ] 1 ?'bar'],
style: { color: 'red' },
id: 'foo',
innerHTML: '',
onClick: foo,
key: 'foo'
}
  • 指令改版

Vue 3 把大大都大局 API 和 内部 helper 移到了 ES 模块中导出(比如 v-model、transition、teleport)，然后使得 Vue 3 在增加了许多新特性之后，基线的体积反而小了。

v-model、v-show 这些 API 全部通过模块导出的办法来引入

基线体积： 无法放弃的代码体积

我们来看一段非常简略的代码 <input v-model="x" />，在 Vue 2 和 Vue 3 中的编译成果有何不同。

// before
function render() {
with(this) {
return _c('input', {
directives: [{
name: "model",
rC l fawName: "v-model",
value: (x),
expression: "x"
}],
domProps: {
"vK $ V M & t G $ {alue"L ( B R: (x)
},
on: {
"input": function ($event) {
if ($event.target.composing) return;
x = $event.target.value
}
}
})
}` Q A
}

// after
import { vModelText as _vModelText, createVNode as _createVNode, withDirectives as _; X M v c , , ,withDirectives, openBlock as _ov 9 2 7 OpenBl] * i # 8ock, createBlock as _cre; - -ateBlock } from "vue"R - 
export fC P ; runction render(_ctx, _cache) {
rb v Q Veturn _with0 w ) s 4 l r DDirectives((_openBlock(), _createBln ; g f ,o{ K wck("inp/ $ - j Cut",r W + T # {
"] o J M v )onUpdate:modelValue": $event => (_ctx.x = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, _ctx.x]
])
}

可以看到在 Vue 3 中，对各个 API 做了更加细致的拆分，抱负状况下，用户可以在构建时运用摇k T R J D 4 V ~ Y树优化 (tree-shaking) 去掉结构中不需求的特性，只保存自己用到的特性。

模版编译器会生q & K成适合做 tree-shaking 的代码，不需求运用者去关怀怎样去做，这部分的改动相同需求在/ V x ? d = JSX 写法中完结。

模板编译器中增加了Z , 7 j PatchFlag，在 JSX 的编译进程相同也做了处理，功用会有e v p g [ 提高，但是考虑到 Je F 0 ^ zSX 的灵敏性，做了一些兼容处理，该功用还在测验阶段。_ ) 1 a a H Z

从 Vue 2 到 Vue 33 ` J k 的过渡

Vue 3 尽Z Y Z T管引入了一部分破坏性的更新，但关于绝大大都 Vue 2 的 API 仍是兼容的。那么相同的，我们也要尽或许让运用 JSX 的用户通过最小的本钱升级到 Vue 3，这是一个核心的方针。

写这篇文章的 ? g 0 w时分，antdv 现已运用 @ant-design-vue/babel6 0 C ) X h &-plugin-jsx 重构了大约 70% 的功用，估计会在 Vue 3 正式版之前发布测验版，大概率会是东半球最快兼容 Vub m # C 3e 3 的企业级组件库。

V( 2 7 E 8 b c Hue 3 JSX 的 API 规划

  • 函数式组件
const App = () => <di= P l kv>Vue 3 JSX</div>
  • 一般组件
const App = {
render() {s n m % u g t V
return <div>Vue 3.0</div>
}
}

const App = defineComponent(() => {
cov ; h f c Y Anst count = ref(0);
const inc = () => {
count.value+ H ] 9 O++;
};
return () => (
<div onClick={inc}>
{coo * u S Munt.value}
</div>
)
})
  • Fragment
consi C N H u M : Ht App = () => (
<>
<span>I'm</v h x lspan>
<sW + ~ pan>Fragment</span>
</>
)

Fragment 参阅 React 的写法，尽或许写起来更加方J ) j e ` L 便。

  • Attributes/Props
const App = () => <input@ * h y 3 / E type="email" />

const placehY k r $ [olderText = 'email'
const ApT f n = g 8p = () => (
<input
type="email"
placeholder={placeholderText}
/&gtL / ; Y I B = j N;
)
  • 指8 F j M x S 8 (令

主张在 JSX 中运用驼峰 (vModel)N | i，但是 v-model 也能用

v-show

const App$ i } X p ) ( # = {
data() {
return { visible: true };
},
renderH u E ; ( l() {
r$ i b s Weturn <input vShow=k & 6{this.visible} />;b V a
},
};

v-mod) u ~ Tel

修饰符：运用 (_) 替代 (.) (vModel_trim={this.test})

export default {
data: () => ({
test: 'Hello World',
}),
rende) ^ I a 0r() {
return (
<>
<input type="text" vModel_trim={this.test} />
{this.test}
</>
)
},
}

自定义指令

const App = {
directives: { antRef },
setup() {
return () => (
<a
vAntRef={(ref) => { this.ref = ref; }}
/>
);
},
}
  • 插槽

关于指令、插槽终究的 API 还在讨论中，有想法的可以去留言F V % e / 7 t M。Vue 3 JSX Design

Vue 2 的 JSX 写法怎样快速搬家到 Vue 3

由于 antdv 的底层基本上都是根据 JSX 来写的，想要快速搬家到 Vue 3，就q Z & V 1 I l r必须有一个比较好的插件来支撑，这也是为什] i F s e R ;么会有这个插件的原因。当然在完结进程中也踩了c p S @ i ; –许多坑。

现在用法和 Vue 2 的语法大大都是一起的，为了帮忙更快搬家，在插件中做了针对旧 VNode 格局的兼容层，这儿只能兼容一部分写法，以及部分语法的兼容会增加工作时的功用开支，所以我们希望可以? [ r 3 ! g将我们的经历同享给我们，让我们少走弯路！

{
"plugins": ["@ant-design-vue/babel-M % y 2 W -plugin-jsx", { "transformOn": true, "compatibleProps": true }]
}v I z n
  • transformOn

针对 Vue 2 中 on: { click: xx } 写法的兼容，在工作时中会转为 oz 2 f J OnClick: xxx。

  • compatibleProps

上文提到 Vue 3 对特色的传递做了I Z s J ) [ y 4改动，props、attrs 这些都不存在了，} V C #因此假设设置了这个特色为 true，在工作时也会r / m , t被解构到第一层的特色中。c C R Z t * D G

需求注意的一点，现在一旦打开这两个特色，在 createVNode 的第二个参数，都会包一个 compatibleProps 和 transformOn 办法，所以酌情打开这两个参数。关于运用 Vue 2 的 JSX 同学，假设没有运用到比较”不为人知“ 的 API的情况下，都可以快速得搬家。

那么 antdv 又是怎样做搬家的呢？考虑到 antdv 是个组件库，都包一h U – % : ~ G h v层 compq _ / DatibleProps 必定不太优K Q 8 y V 6雅，因此没有挑选打开这个两个开关。这儿插一句，现在 a; m l , h E ` f %ntdv 的搬家还在进行中，相关的发展都在这个 issue 里面（Vue 3 支撑），有喜好的同学可以注重下，提一些 PR 曩昔。

关于 props 的搬家作业x N ` C D 比较简略，只需求把原有涣散在 props、on、attrs 中的值直接铺开即可。

 const vcUploadPro& A g e s 9 s & ^ps = {
-  props: {
-    ...this.$props,
-   pref4 X T h ( G 5 l ?ixCls,
-    beforeUpload: this.reBeforeUpload,
-  },j t n 1 m
-  on: {
-    start: this.onSt.  F D F # L  9art,
-S j I u - ! j |    error: this.onError,] 7 ( 7 w v =
-    pro! ~ T p | ; R 8gress: this.onProgress,
-    success: this.onSuccesi C & h 1 J I N :s,
-    reject: thiI r ` Os.onReject,
- },
+  ...this.$props,
+  prefixCls,
+  beforeUpload: this.reBeforeUpload,
+  onStart: this.onSi X  G % ( I o #tart,
+  onError: this.onError,
+  onProg@ ? kress: this.onProgress,
+  onSj n r A v ?uccess: this.onSuccess,
+  onReject: this.onReject,
+  ref: 'uploadRef',
+  attrs: this.$attrs,
+  ...this.$attrs,
};

但是关于 inheritAttrs 有个较为底层的变化，需求开发者根据实际情况去批改。什么是inheritAttrs？ 在 Vue 2 中，这个选项不影响 class 和 style 绑定，但是在 Vue 3 中会影响到。因此或许在特色的传递上，需求额外对这两个参数做处理。

在. e * , | Y Y工作的处理上，咱+ g m p )们主张在 props 中声明，这样对后续的开发更加易维护，w Q ? 1 d &可以很直观地从 props 看出我这个组件到底会传递哪些工作。值得一提的是，在 props 中声明的工作，也能d / + n s , m够通过 emit 来触发。例如声清楚 onClick 工作，依然可以运用 emit('click')。

Vue 3 对 context 的 API 也做了改动，一般假设不是杂乱的组件，不会涉及到这个 API。这部分的改动可以看原先 Vue Compositon A] s C j $ VPI 的相关文档，D| F D e F # hependency Inje+ P l n Q action，注意一点，在 setup 中取不到 this。

总结

如今有逾越百万的开发人员运用 Vue，还有E l + ) v A 4 u [超百万的 React 开发者正在去运用 Vue 的路上。

尽管说V7 ? ` bue 中 JSX 的开发办法是一个少数群里，但是 antdv 的运用用户也不是少数。为了让这部分用户可以快速体会到兼容 Vue 3 版别的组件库，因此在规: C t $ l 8划这个插件的 = e 2 Z r C ; $时分，第一准则便是要最小的搬家和认知本钱。

关于终年运用 template 的开发者来说，JSX 又何曾不是一片新的天空呢| k d [ 2？开发者要与运用者共情，站在运用者的视点动身，规划出的东西大概率或许满足其需求。

距离 JSX 发布正式版别，还有T G $ E / y N k一部分路要走。

终究要感谢 Vue.js 官方团队和 @sodatea 大佬的信赖。

文中出现的仓库地址：

  • Ant Design Vue github.com/vueComponen…
  • @ant-design-vue/babel-plugin-jsx github.com/vueComponen…

后续

拥抱 Vue 3 系列之怎样开发{ y H H [规划一个 Vue 3 JSX 插/ % l l R |件

举荐阅读

分分钟教会你树立企业级的 npm 私有仓库

一份值得收藏的 Git 失常处理清单

招贤纳士

政采云前端团队（ZooTeam），一个年轻富o N s有热情和发明力的前端团队，A w } ( W隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 50 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥[ B j _妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程途径、树立途径、功用体会、云端运用、数据分析及可视化等方向进行技术探究和实战，推进并落地了一系% = ) n 2 H ? P f列的内部技术产品，持续探究前端技术体系的新距离。

假设$ B W ^ ~ ! & z Q你想改动一贯被事折腾，希望开始能折腾事；假设你想k X %改动一贯被劝诫需求多些想法，却无从破局；假设你想D R 5改动你有才能去做成那个成果，却不需求你；假设你想改动你想做成的事需求一个团队去支撑，但没你带人的位置；假设你想改动既定的节奏，将会是“ 5 年作业时间 3 年作业经历”；假设你想改. , 1 / S E变原本领悟不错，但J 0 : a o : g总是有那一层窗户纸的含糊… 假设你信赖信赖的力气，信赖平凡人能成果非凡事，信赖能遇到更好的自己Z 2 _ ( C。假设你希望参加到跟着业务腾飞的进程，亲手推进一个有着深化的业务理解、完善的技术体系、技术发明价值、影响力外溢的前端团队的成长进程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com

拥抱 Vue3 系列之 JSX 语法