尤雨溪在Vue3.0直播中聊到了什麼

本文轉載自

https://juejin.im/post/5e9f6b3251882573a855cd52

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：編譯模板的優化

假設要編譯以下代碼

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

感興趣的可以看源碼：packages/shared/src/patchFlags.ts

4. Tree shaking support

可以將無用模塊“剪輯”，僅打包需要的（比如v-model,，用不到就不會打包）。
一個簡單“HelloWorld”大小僅爲：13.5kb

11.75kb，僅Composition API。

包含運行時完整功能：22.5kb

擁有更多的功能，卻比Vue 2更迷你。

很多時候，我們並不需要 vue提供的所有功能，在 vue 2 並沒有方式排除掉，但是 3.0 都可能做成了按需引入。

5. Composition API

與React Hooks 類似的東西，實現方式不同。

可與現有的 Options API一起使用
靈活的邏輯組合與複用
vue 3的響應式模塊可以和其他框架搭配使用

混入(mixin) 將不再作爲推薦使用， Composition API可以實現更靈活且無副作用的複用代碼。
感興趣的可以查看：composition-api.vuejs.org/#summary

Composition API包含了六個主要API
可以到這裏查看：composition-api.vuejs.org/api.html#se…
Ps：其它的均爲常見的工具函數，可先忽略不看。