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

时间 2020-05-04

标签笔记 vue3.0 vue beta 直播到了这些繁體版

原文原文链接

前言

在4月21日晚，Vue做者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。如下是直播内容整理html

1. 全新文档`RFCs`

Vue.js 3.0 Beta发布后的工做重点是保证稳定性和推动各种库集成前端

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

2. 六大亮点

Performance：性能更比Vue 2.0强。
Tree shaking support：能够将无用模块“剪辑”，仅打包须要的。
Composition API：组合API
Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”
Better TypeScript support：更优秀的Ts支持
Custom Renderer API：暴露了自定义渲染API

下面将按顺序分别描述。react

3. `Performance`

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

下面是各项性能对比webpack

要点1：编译模板的优化

假设要编译如下代码git

<div>
  <span/>
  <span>{{ msg }}</span>
</div>
复制代码

将会被编译成如下模样：github

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”：web

Vue在运行时会生成number（大于0）值的PatchFlag，用做标记。算法

仅带有 PatchFlag标记的节点会被真正追踪，且 不管层级嵌套多深，它的动态节点都直接与Block根节点绑定，无需再去遍历静态节点

再看如下例子：vue-router

<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