敲黑板记笔记了：尤雨溪在Vue3.0 Beta直播里聊到了这些…

前言

在 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

 

1. 重写了虚拟Dom的实现（且保证了兼容性，脱离模版的渲染需求旺盛）。
2. 编译模板的优化。
3. 更高效的组件初始化。
4. update性能提高 1.3~2 倍。
5. 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标记的节点会被真正追踪，且无论层级嵌套多深，它的动态节点都直接与B