抄筆記：尤雨溪在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