前言

在4月21日晚,Vue作者尤雨溪在哔哩哔哩直播共享了Vue.js 3.0 Beta最新发展。
以下是直播内容整理

1. 全新文档RFCs

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

Vue.js 3.0 Beta发布后的作业重点是确保安稳性n % } | 7 6 ] 1 (和推动各类库集成

一切的进度和文档都将在全新RFCs文档能够看到。

2. 六大亮点

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • Performance:功用更比Vh { 2 Y I K I g `ue 2.0强。
  • Tree shaking support:能够将无用模块“编排”,仅打包需求的。
  • Composition API:组合API
  • Fragment, Teleport, Suspense:“碎片”,Telep, I f 4 d ) zortProtal传送门,“悬念”
  • Better TypeScript support:更优异的TE b Fs支撑
  • Cust{ Y t c R $ ~om Renderer API:暴露了自界说烘% l @ I L s H E 4API

下面将按次序别离描述。

3. Performance

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  1. 重写了虚拟Dom的完成(且确保了兼容性,脱离模版的烘托需求旺盛)。
  2. 编译模板的优化。
  3. 更高效的组件初始化。
  4. update功用提高1.3~2倍。
  5. SSR速度提高了2~3倍。

下面是各项功用比照

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

关键1:编译模板的优化

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

假设要编译以下代码

&lO P 6 2 d - 5 - it;di& o [ q P _ Tv>
<span/>
<span>{{ msg }}</span>
</di, . A z @ @ * H {v>

将会被编译成以下容貌:

import { crS / m % _ 4 =eateVNode as _createVM ) w i 2 8Node, toDisplayString as _toDisplaySt] T * f g e : ; Dring, openBlock as _6 u h ) g X y _openBlock, createBlock as _createBlock* H Y s F { s } from "vue"
export function render(_ctx, _cache) {
return (_openB Z - ? ~ x llock(), _creatJ J K geBlock("div", null, [
_createVNod 8 |e("span", null, "static")e , % 8 ^,
_createVNode("span"0 k W &, null,P P u _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}
// Check the console for the AST

注意看g @ z t * z ? D (第二个_createVNode完毕的“1”:

Vue在运行时会生成number(大于0)值的PatchFlag,用作符号。

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

仅带有PatchFlag符号的节点会被真正追寻,且不管层级嵌套多深,它的动态节点j b L 8都直接与{ 3 F ] ) | s }Block根节点绑定,无需再去遍历静态节点

再看以下例子:

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
<div>
<B | U 1span>static</span>
<e ~ Q [ ! { S kspan :id="helO s o b p T m .lo" class="bar">{{ msg }}   </span>
</div>

会被编1 c k H | Z 1译成:

import { creu W  w d fateVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlr j G E ] M Vock, createB+ V  A k s c m ulock as _createBlock } from "vue"
export function render(_ctS K w ( 3 3  ~x, _cache) {
return (_openBlock(), _createBlo[ J o Wck("div", na $ L D j C ] }ull, [
_createVNode("span", null, "static"),
_createVN? v I w 7 f /ode("9 F & N -  A *span",; K ^ c C I a {
id: _ctx.hello,
clu 9 j Nass{ O G: "bar"
}V X t, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["id"])
])d 5 Z . ] G b)
}

PatchFlag 变成了9 /* TEXT, PROPS */, ["id"]

它会奉告咱们不光有TEXT改变,G R p + $ K还有PROPS改变(id)

这样既跳出了virtual dom功用的瓶颈,又保留了能够手写render的灵敏性。
等于是:既有react的灵敏性,又有依据模板的功用确保。

关键2: 事情监听缓存:cacheHandlers

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

假设咱们要绑定一个事情:

<div>
<spI Z  2 Pan @click="onCl x ? Pick] ) Z K ~ t i B v">
{{msg}}
</spw z U = l [ C ( Ean>
</div>

封闭cacheHandlers后:

import { toDisplayString as _toDisplayString, create- D : ,VNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("span", { onClick: _p O Lctx.onClick }, _toDisplayStL N b 6ring(_ctx.msg), 9 /* TEXT, P} { 2 z % U 6 3ROPS */, ["onClick"])
]))
}

onClick会被视为PROPS动态绑定,后续替换点击事情时需求进行更新。

敞开7 0 P f BcacheHandlers后:

import { toDisplayString as _toDisplayStringF 3 (, createVNode as _createVNode, opL W 5 % A h k benBlock as _openBlock, createBlock as _createBlock } from "vue"
export function reY T `nder(_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:相当于Reactk % n d g T I P KuseCallback主动化。

并且支撑手写内联函数:

<div>
<span @click="()=>foo()"&Q V Z 5 B Qgt;
{{msg}}
</span>
</divO  a P / x 9 ` $>

补充:PatchFlags枚举界说

而经过查| ` ` & e y f pTs枚举A $ U : P !界说,咱们能够看到别离界说了以下的追寻符号:f = M

export const enum PatchFlags {
TEXT = 1,// 表明具有动态textContent的元素
CLASS = 1 <- w t< 1,  // 表明有动态Class的元素
STYLE = 1 << 2,  // 表明动态样式(静态如style="color: red",也会提升至动态)
PROPS = 1 << 3,  // 表明具有非类/样式动态道具的元_ k T O O - F c素。
FU 9 U c a 2 K ,LL_PROPS = 1 << 4,  // 表明带有动态键的道具的元素,与上面三种相斥
HYDRATE_EVENTS = 1 << 5,  // 表明带有事情监听器的元素
STABLE_FRAGM[ 4 iENT = 1 << 6,   // 表明其子次序不变的片段(没懂)。
KEYED_FRAGMENT = 1 << 7, // 表明带有键控或部分键控子元素的片段。
UNKEYED_FRAGMENT = 1 << 8, // 表明带有无T V V [ y s V rkey绑定的片! 2 j段
NEED_PATCH = 1 << 9,   // 表明只需求非特点补丁的元素,例如ref或hooks
DYNAM4 L ( ) KIC_SLOTS = 1 << 10,  // 表明具w 0 s L G P M i有动态插槽的元素
// 特别 FLAGS ------------R | P .------------------------R u ! [-------------------------
HOISTED = -1,  // 特别标志是负整数表明永久不会用作diff,只需检查 patchFlag === FLAG.
BAIL = -2 // 一个特别的标志,指代差异算法(没懂)
}

感兴趣的能够看源码:packages/shared/src/patchFlags.- U - D 7 9ts

4. Tree shaking support

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • 能够将无用模块“编排”,仅打包需求的(比如v-model,<trans( M I lition>,用不到就不会打包)。
  • 一个简单“HelloWorld”大小仅为:13.5kb
    • 11.75kb,仅Composition API
  • 包括运行时完整功用:22.5kb
    • 拥有更多的功用,却比Vue 2更迷你。

许多时分,咱们并不需求 vue提供的一切功用,在 vue 2 并没有方法排除掉,可是 3.0 都可能做成了按需引进。

5. Composition API

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

React Hooks 类似的东西,完成方 , & $ {法不同。

  • 可与现有的 Options API一同运用
  • 灵敏的逻辑组合与复用
  • vue 3的呼应式模块能够和其他结构搭配运用

混入(mixin) 将不再作为推荐运用, Composition API能够完成更灵敏且无副作用的复用代码。

感兴趣的能够检查:composition-api.vuejs.h / Sorg/#summary

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

Composition API包括了六个首要API

能够到这儿检查:composition-api.vuS T Uejs.org/api.html#se…

Ps:其它的均为常见的东西函数,可先忽略不看。

6. Fragment

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

Fragment翻译为:“碎片”

  • 不再限于模板中的单个根节点
  • render 函数也能够回来数组了,类似完成了 React.Fragments* r q L u 4 9 T a 的功用 。
  • Just works

6.1 <Teleport>

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • 曾经称为<P4 ` | ] e W h q Lort: h J Ral&b v H G O #gt;,译作传送门。
  • 更多细节将由@Linusbq v ~ – J Vorg 共享

<Teleport>原先是对标 React Portal(添加多个新功用,更强)

但由于Chrome有个提案,会添加一个名为Portal的原生element,为避免命名冲突,改为Telepo~ - 1 f d }rt

6.2 <Suspense>

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

Suspense翻译为:“悬念”

  • 可在嵌套层级中等待嵌套的异步依靠项
  • 支撑async setup()
  • 支撑异步组件

虽然React 16引进了Suspense,但直至现在都不太能用。如何将其与异步数据结合,还没完整规划出来。

Vue 3 的<Suspense>更加轻量:

仅5%运用能感知运行时的调度差异,归纳考虑下,Vue3 的<Suspense>3 0 _ @ 5 [; 没和React一样做运行调度处理

7. 更好的TypeScript支撑

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • Vue 3是用TypeSo l T N : Rcript编写的库,能够享受到主动的类型界说提示
  • JavaScriptTypeScri= D N Rpt中的API是相同的。

    • 事实上,代码也根本相同j E a 2 I t 1
  • 支撑TSX
  • class组件还会继续支撑,可是需求引进vue-class-component@next,该模块现在还处在 alpha 阶段。

还有Vue 3 + TypeScript 插件正在开发,有类型检查,主动补全等功用。现在发展可喜。

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

8. Custom Renderer API:自界说烘托器APIJ – C

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • 正在进行NativeScript Vue集成G / d K _ A : V
  • 用户能够尝试WeQ 4 v B R F K zbGL自界说烘托器,与一般Vue运用程序一同运用(Vugel)。

` o p (味着今后能够经过 vueDomJ 2 y C 3 $ e程的方法来进行 webgl 编程 。感兴趣能够看这儿:Getting started vuw *gel

9. 剩下作业

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

9.1 Docs & Migration Guides

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • 新的文档编写交由@NataliaTepluhina, @sdras, @V 3 %bencodezen & @phanan 负责
  • @sdras 正在做主动晋级搬迁东西
  • @sodatea 现已开始研讨Cog ~ # u u BdeMods

9.2 Router

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • 下一代 Rou{ 7 # k e B U ~ ftervuO W u Q W l 6 3 Fe-router@next已在alpha阶段I N W 1 k ,,感谢@posva

有部分的API变动,可到RFC上看。: q } –

9.3 Vu{ } ) : ? 0 ?ex

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

`

  • 下一代Vu[ ^ M bex:,vuex@next(与Vue 3 compat相同的A^ Z W R F 7 V ! YPI),已在alpha阶段,b O N . : f c {感谢@KiaKing
  • 团队正在为下一次迭代试验Vuex API的简化

现在以兼容Vue 3为主,根本上没有API变动,莫慌。

9.4 CLI

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • CLI插件:vue-cli-plugin-vue-nextby @si Y E { # : $ modatea
  • (wip)CodeMa % W ) c 2 c $ods支撑晋级Vue 2运用

9.5 新东西:vite(法语 “快”)` 8 : ~ % ! N l 1

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

地址:github.com/vuejs/vite

一个简易的http服务器,无需webpack编译打包,依据请求的Vue文件,直接发回烘托,且支撑热更新(非常快)

9.6 vue-test-utils

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • 下一代test-utilg | # w a 8s:test-utils@next
    • by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

9.7 DevToom b d & n % { 0 cls

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • 早期X f 2 K M ? | { G的原型现已由@Akryum 完成3 E 6 Z 2 e,当咱们到beta时,将彻底集成。

现在需求花更多精力去完善。

9.8 IDE Support (Vo z Aetur)

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • @znck现在正在试验模板的类型检查
  • @o& 6 / M ectref将在5月为Vue 3进行Vetur集成

9.9 Nuxt

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

现在Nuxt的整合作业也正在进行中,内部团队现已跑起来了。还需求时刻磨合

10. Vue 2.x还有2.7版别

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
  • 将有最终一个小版别(2.7)
  • Vue 3向后移植兼容的改进(不损坏兼容性前提下)
  • 加上在Vuk ( I ue 3中删除的功用的弃用警告
  • LTS1 18个月。

最终主张:Vue 3虽好,W @ H如果你的` [ P 9 C ` &项目很安稳,且对新功用无过多的要求或许搬迁本钱过高,则不主张晋级。

完毕

花了一宿重复回放整理出来的,如有错误,纵情谅解。

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

附:直播中用到的烘托模板检查东西地址:vue-next-template-explorer.netlify.app/

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

❤️ 看完三件事

如果你觉得这篇内容对你挺有启示,我想邀请你帮我三个小忙:

  1. 点赞,让更多的人也能看到1 w p z } u这篇内容(保藏不点赞,都是耍流氓 -_-)
  2. 关注大众号「前端劝退师」,不定期共享原创常识。
  3. 也看看其它文章
抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…

劝退师个人微信:huab119

也能够来我的GitHub博客里拿一切文章的源文件:

前端劝退指南:github.com/roger-hiro/…
一同玩耍呀。~

抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…