抄笔记:尤雨溪在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`

重写了虚拟Dom的实现（且保证了兼容性，脱离模版的渲染需求旺盛）。
编译模板的优化。
更高效的组件初始化。
update性能提高 1.3~2 倍。
SSR速度提高了 2~3 倍。

下面是各项性能对比

要点 1：编译模板的优化

假设要编译以下代码

    {{ msg }}

将会被编译成以下模样：

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根节点绑定，无需再去遍历静态节点

再看以下例子：

  static  {{ msg }}

会被编译成：

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`

假设我们要绑定一个事件：

      {{msg}}

关闭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自动化。

并且支持手写内联函数：