前言
在4月21日晚,Vue作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta
最新进展。
以下是直播内容整理
1. 全新文档RFCs
Vue.js 3.0 Beta
发布后的工作重点是保证稳定性和推进各类库集成
所有的进度和文档都将在全新RFCs
文档可以看到。
2. 六大亮点
Performance
:性能更比Vue 2.0
强。Tree shaking support
:可以将无用模块“剪辑”,仅打包需要的。Composition API
:组合API
Fragment, Teleport, Suspense
:“碎片”,Teleport
即Protal传送门
,“悬念”Better TypeScript support
:更优秀的Ts支持Custom Renderer API
:暴露了自定义渲染API
3. Performance
- 重写了虚拟
Dom
的实现(且保证了兼容性,脱离模版的渲染需求旺盛)。 - 编译模板的优化。
- 更高效的组件初始化。
update
性能提高1.3~2倍。SSR
速度提高了2~3倍。
要点1:编译模板的优化
假设要编译以下代码
<div>
<span/>
<span>{{ msg }}</span>
</div>
复制代码
将会被编译成以下模样:
import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("span", null, "static"),
_createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}
// Check the console for the AST
复制代码
注意看第二个_createVNode
结尾的“1”:
Vue在运行时会生成number
(大于0)值的PatchFlag
,用作标记。
仅带有PatchFlag
标记的节点会被真正追踪,且无论层级嵌套多深,它的动态节点都直接与Block
根节点绑定,无需再去遍历静态节点
再看以下例子:
<div>
<span>static</span>
<span :id="hello" class="bar">{{ msg }} </span>
</div>
复制代码
会被编译成:
import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("span", null, "static"),
_createVNode("span", {
id: _ctx.hello,
class: "bar"
}, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["id"])
]))
}
复制代码
PatchFlag
变成了9 /* TEXT, PROPS */, ["id"]
它会告知我们不光有TEXT
变化,还有PROPS
变化(id)
这样既跳出了virtual dom
性能的瓶颈,又保留了可以手写render
的灵活性。
等于是:既有react
的灵活性,又有基于模板的性能保证。
要点2: 事件监听缓存:cacheHandlers
假设我们要绑定一个事件:
<div>
<span @click="onClick">
{{msg}}
</span>
</div>
复制代码
关闭cacheHandlers
后:
import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("span", { onClick: _ctx.onClick }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["onClick"])
]))
}
复制代码
onClick
会被视为PROPS
动态绑定,后续替换点击事件时需要进行更新。
开启cacheHandlers
后:
import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("span", {
onClick: _cache[1] || (_cache[1] = $event => (_ctx.onClick($event)))
}, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}
复制代码
cache[1]
,会自动生成并缓存一个内联函数,“神奇”的变为一个静态节点。
Ps:相当于React
中useCallback
自动化。
并且支持手写内联函数:
<div>
<span @click="()=>foo()">
{{msg}}
</span>
</div>
复制代码
补充:PatchFlags
枚举定义
而通过查询Ts
枚举定义,我们可以看到分别定义了以下的追踪标记:
export const enum PatchFlags {
TEXT = 1,// 表示具有动态textContent的元素
CLASS = 1 << 1, // 表示有动态Class的元素
STYLE = 1 << 2, // 表示动态样式(静态如style="color: red",也会提升至动态)
PROPS = 1 << 3, // 表示具有非类/样式动态道具的元素。
FULL_PROPS = 1 << 4, // 表示带有动态键的道具的元素,与上面三种相斥
HYDRATE_EVENTS = 1 << 5, // 表示带有事件监听器的元素
STABLE_FRAGMENT = 1 << 6, // 表示其子顺序不变的片段(没懂)。
KEYED_FRAGMENT = 1 << 7, // 表示带有键控或部分键控子元素的片段。
UNKEYED_FRAGMENT = 1 << 8, // 表示带有无key绑定的片段
NEED_PATCH = 1 << 9, // 表示只需要非属性补丁的元素,例如ref或hooks
DYNAMIC_SLOTS = 1 << 10, // 表示具有动态插槽的元素
// 特殊 FLAGS -------------------------------------------------------------
HOISTED = -1, // 特殊标志是负整数表示永远不会用作diff,只需检查 patchFlag === FLAG.
BAIL = -2 // 一个特殊的标志,指代差异算法(没懂)
}
复制代码
感兴趣的可以看源码:packages/shared/src/patchFlags.ts
4. Tree shaking support
- 可以将无用模块“剪辑”,仅打包需要的(比如
v-model,<transition>
,用不到就不会打包)。 - 一个简单“
HelloWorld
”大小仅为:13.5kb- 11.75kb,仅
Composition API
。
- 11.75kb,仅
- 包含运行时完整功能:22.5kb
- 拥有更多的功能,却比
Vue 2
更迷你。
- 拥有更多的功能,却比
很多时候,我们并不需要 vue
提供的所有功能,在 vue 2
并没有方式排除掉,但是 3.0 都可能做成了按需引入。
5. Composition API
与React Hooks
类似的东西,实现方式不同。
- 可与现有的
Options API
一起使用 - 灵活的逻辑组合与复用
vue 3
的响应式模块可以和其他框架搭配使用
混入(mixin
) 将不再作为推荐使用, Composition API
可以实现更灵活且无副作用的复用代码。
感兴趣的可以查看:composition-api.vuejs.org/#summaryComposition API
包含了六个主要API
可以到这里查看:composition-api.vuejs.org/api.html#se…
Ps:其它的均为常见的工具函数,可先忽略不看。
6. Fragment
Fragment
翻译为:“碎片”
- 不再限于模板中的单个根节点
render
函数也可以返回数组了,类似实现了React.Fragments
的功能 。-
6.1
<Teleport>
以前称为
<Portal>
,译作传送门。- 更多细节将由@Linusborg 分享
<Teleport>
原先是对标 React Portal
(增加多个新功能,更强)
但因为Chrome
有个提案,会增加一个名为Portal
的原生element
,为避免命名冲突,改为Teleport
6.2 <Suspense>
Suspense
翻译为:“悬念”
- 可在嵌套层级中等待嵌套的异步依赖项
- 支持
async setup()
- 支持异步组件
虽然React 16
引入了Suspense
,但直至现在都不太能用。如何将其与异步数据结合,还没完整设计出来。
Vue 3 的<Suspense>
更加轻量:
仅5%应用能感知运行时的调度差异,综合考虑下,Vue3 的<Suspense>
没和React一样做运行调度处理
7. 更好的TypeScript
支持
Vue 3
是用TypeScript
编写的库,可以享受到自动的类型定义提示JavaScript
和TypeScript
中的API是相同的。- 事实上,代码也基本相同
- 支持
TSX
class
组件还会继续支持,但是需要引入vue-class-component@next
,该模块目前还处在 alpha 阶段。
还有Vue 3 + TypeScript
插件正在开发,有类型检查,自动补全等功能。目前进展可喜。
8. Custom Renderer API
:自定义渲染器API
- 正在进行
NativeScript Vue
集成 - 用户可以尝试
WebGL
自定义渲染器,与普通Vue应用程序一起使用(Vugel
)。
意味着以后可以通过 vue
, Dom
编程的方式来进行 webgl
编程 。感兴趣可以看这里:Getting started vugel
9. 剩余工作
9.1 Docs & Migration Guides
- 新的文档编写交由
@NataliaTepluhina, @sdras, @bencodezen & @phanan
负责 @sdras
正在做自动升级迁移工具-
9.2
Router
下一代
Router
:vue-router@next
已在alpha
阶段,感谢@posva
9.3 Vuex
`
- 下一代
Vuex
:,vuex@next
(与Vue 3 compat
相同的API),已在alpha
阶段,感谢@KiaKing
。 - 团队正在为下一次迭代试验
Vuex API
的简化
9.4 CLI
地址:github.com/vuejs/vite
一个简易的http
服务器,无需webpack
编译打包,根据请求的Vue
文件,直接发回渲染,且支持热更新(非常快)
9.6 vue-test-utils
下一代
test-utils
:test-utils@next
早期的原型已经由@Akryum 完成,当我们到
beta
时,将完全集成。
9.8 IDE Support (Vetur)
@znck
目前正在试验模板的类型检查-
9.9
Nuxt
目前Nuxt
的整合工作也正在进行中,内部团队已经跑起来了。还需要时间磨合10.
Vue 2.x
还有2.7版本 将有最后一个小版本(2.7)
- 从
Vue 3
向后移植兼容的改进(不损坏兼容性前提下) - 加上在
Vue 3
中删除的功能的弃用警告 LTS1
18个月。
最后建议:Vue 3
虽好,如果你的项目很稳定,且对新功能无过多的要求或者迁移成本过高,则不建议升级。
结束
花了一宿反复回放整理出来的,如有错误,尽情谅解。
附:直播中用到的渲染模板查看工具地址:vue-next-template-explorer.netlify.app/
劝退师个人微信:huab119
也可以来我的GitHub
博客里拿所有文章的源文件:
前端劝退指南:github.com/roger-hiro/…
一起玩耍呀。~
作者:前端劝退师
链接:https://juejin.im/post/5e9f6b3251882573a855cd52
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。