尤雨溪關於vue3.0 Beta的直播分享

全新文檔`RFCs`

Vue.js 3.0 Beta發布后的工作重點是保證穩定性和推進各類庫集成

所有的進度和文檔都將在全新RFCs文檔可以看到。

六大亮點

Performance：性能更比Vue 2.0強。
Tree shaking support：可以將無用模塊“剪輯”，僅打包需要的。
Composition API：組合API
Fragment, Teleport, Suspense：“碎片”，Teleport即Protal傳送門，“懸念”
Better TypeScript support：更優秀的Ts支持
Custom Renderer API：暴露了自定義渲染API

`Performance`

重寫了虛擬Dom的實現（且保證了兼容性，脫離模版的渲染需求旺盛）。
編譯模板的優化。
更高效的組件初始化。
update性能提高1.3~2倍。
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標記的節點會被真正追蹤，且無論層級嵌套多深，它的動態節點都直接與Block根節點綁定，無需再去遍歷靜態節點

再看以下例子：

<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 // 一個特殊的標志，指代差異算法（沒懂）
}