欢迎关注我的个人微信公众号「HcySunYang」。Let's coding for fun together!
写完下面这篇文章之后
《Vue3 Compiler 优化细节,如何手写高性能渲染函数》
就想着要不就着手开发一个完全为 Vue3 设计的 JSX 插件吧,于是就有了:
这个插件已经是可使用的状态了,我正在使用该插件在另外一个项目中,说说这个插件的设计原则和基本用法
直接使用 TSX
Vue3 的确可以直接使用 tsx 开发,唯一需要处理的就是 children,而且处理起来还是比较不爽的,例如你不能这么写:
<div> <p>1</p> <p>1</p> </div> 复制代码
你需要:
<div> { [ <p>1</p>, <p>1</p> ] } </div> 复制代码
这还是挺恶心的,不过也不是没有办法,可以封装一个工具函数:
function JSXFactory(tag: any, props: any, ...children: any) { if ( typeof tag !== 'string' && typeof tag !== 'symbol' && !tag.__isTeleport && !tag.__isKeepAlive ) { // Component children = children[0] } return createVNode(tag, props, children) }复制代码
然后在 tsconfig.json 中配置 jsxFactory 为我们封装的这个函数就可以了。但是这个函数限制了我们在为组件传递 slots 时只能:
const App = { setup() { const slots = { foo: () => <p>foo</p>, bar: () => <p>bar</p>, } return () => <Hello>{ slots }</Hello> } }复制代码
但是这也没啥问题嘛。
有了 JSXFactory 工具函数之后其实我们可以很开心的用 tsx 写了,那为啥还要 jsx 插件呢?这是因为使用了 jsx 语法后我们丢失了很多模板中提供的便利能力,例如事件修饰符、v-model 之类的, 因此 jsx 插件还是有必要的,但是不是必须的。
下面说说 github.com/HcySunYang/… 的设计原则和功能。
既支持 JSX 又支持 TSX
tsx 中不支持 amespaced attribute,详见:github.com/microsoft/T… ,但 babel 中是支持,这就意味着你在 jsx 中可以这么写:
<p v-on:click={ handler } ></p>复制代码
但是 tsx 中则不行,为了语法统一,我决定不允许在属性名中使用 :,而是使用 - 替代 :
<p v-on-click={ handler } ></p>复制代码
统一语法的好处是:降低不同项目差异带来的额外负担 / 困扰 (有的人使用 : 有的人使用 -)。
无论是 jsx 还是 tsx,修饰符都不允许使用 .,而是使用 _ 代替:
<p v-on-click_stop={ handler } ></p>复制代码
对于事件,vue-next-jsx 支持全部的模板中可用语法,例如:
<div v-on-click_middle={ handler }></div> <div v-on-click_stop={ handler }></div> <div v-on-click_right={ handler }></div> <div v-on-keyup_esc={ handler }></div> <div v-on={ obj }></div>复制代码
v-model
Vue2 中的 .sync 被 v-model:foo 代替了,例如:
<!-- Vue2 --> <Comp :foo.sync="val" /> <!-- Vue3 --> <Comp v-model:foo="val" />复制代码
在 jsx 中,把 : 换成 - :
<Comp v-model-foo={ refVal.value }/> 复制代码
也可以带修饰符,用 _ 分割:
<Comp v-model-foo_a_b={ refVal.value }/> 复制代码
v-bind
在 j/tsx 中不需要 v-bind,直接使用 jsxExpressionContainer 和 jsxSpreadAttribute 代替:
<Comp foo={ refVal.value } { ...props } bar="bar" />复制代码
slots
我不准备支持 v-slot ,这是因为它会导致类型丢失,例如:
<Comp> <template v-slot-foo="props"> </template> </Comp> 复制代码
这里的 props 没有类型,它就是一个字符串,而且我始终推荐像如下这样为组件传递插槽:
<Comp>{ mySlots }</Comp> 复制代码
至于插槽 mySlots 我们可以自行构建它:
const mySlots = { default: () => [<p>默认插槽</p>] } 复制代码
KeepAlive 和 Teleport
这两个组件比较特殊,他们的子节点不会作为 slots 存在,而是当做正常的 children,不过你不用担心,vue-next-jsx 帮你处理了。
Optimization mode
优化模式,正如 zhuanlan.zhihu.com/p/150732926 这篇文章中讲述的,我们可以在 jsx 插件中利用这些信息,尽可能的提升性能。
在 babel.config.json 中打开优化模式:
{ "presets": [ "@babel/env" ], "plugins": [ ["@hcysunyang/vue-next-jsx", { // 开启优化模式 "optimizate": true }] ] }复制代码
实际上,你可以查看 vue-next-jsx 的测试用例生成的 ,并与 Vue3 Compiler 对比,他们的行为是一致的,包括及其复杂的情况。
- vue-next-jsx 测试用例 snapshots:github.com/HcySunYang/…snapshots
- Vue3 Compiler Explorer:vue-next-template-explorer.netlify.app/
指定 source
source 指的是 ImportDeclaration 语句的 source,例如:
import { createApp } from 'vue'复制代码
这里的 source 就是 vue ,但是你可能安装的不是 vue 而是 @vue/runtime-dom ,这时你需要指定 source:
{ "presets": [ "@babel/env" ], "plugins": [ ["@hcysunyang/vue-next-jsx", { // 指定 source "source": "@vue/runtime-dom" }] ] } 复制代码
v-html / v-text
在 jsx 中支持这两个指令意义不大,全当顺手,它们的使用与在模板中相同:
<p v-html={ refHtml.value }></p> <p v-text={ refText.value }></p>复制代码