尤雨溪在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：可以將無用模塊「剪輯」，僅打包需要的。Fragment, Teleport, Suspense：「碎片」，Teleport即Protal傳送門，「懸念」Better TypeScript support：更優秀的 Ts 支持Custom Renderer API：暴露了自定義渲染API

下面將按順序分別描述。

3.Performance重寫了虛擬Dom的實現（且保證了兼容性，脫離模版的渲染需求旺盛）。

下面是各項性能對比

要點 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">{{ 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枚舉定義，我們可以看到分別定義了以下的追蹤標記：
感興趣的可以看源碼：packages/shared/src/patchFlags.ts
4. Tree shaking support可以將無用模塊「剪輯」，僅打包需要的（比如v-model,<transition>，用不到就不會打包）。一個簡單「HelloWorld」大小僅為：13.5kb11.75kb，僅Composition API。
很多時候，我們並不需要 vue提供的所有功能，在 vue 2 並沒有方式排除掉，但是 3.0 都可能做成了按需引入。
5. Composition API
與React Hooks 類似的東西，實現方式不同。
混入(mixin) 將不再作為推薦使用， Composition API可以實現更靈活且無副作用的復用代碼。
感興趣的可以查看：https://composition-api.vuejs.org/#summary
Composition API包含了六個主要API
可以到這裡查看：https://composition-api.vuejs.org/api.html#setup
Ps：其它的均為常見的工具函數，可先忽略不看。
6. Fragment
Fragment翻譯為：「碎片」
render 函數也可以返回數組了，類似實現了 React.Fragments 的功能 。6.1 <Teleport>
<Teleport>原先是對標 React Portal（增加多個新功能，更強）
但因為Chrome有個提案，會增加一個名為Portal的原生element，為避免命名衝突，改為Teleport
6.2 <Suspense>
Suspense翻譯為：「懸念」
雖然React 16引入了Suspense，但直至現在都不太能用。如何將其與異步數據結合，還沒完整設計出來。
Vue 3 的<Suspense>更加輕量：
僅 5%應用能感知運行時的調度差異，綜合考慮下，Vue3 的<Suspense> 沒和 React 一樣做運行調度處理
7. 更好的TypeScript支持Vue 3是用TypeScript編寫的庫，可以享受到自動的類型定義提示JavaScript和TypeScript中的 API 是相同的。class組件還會繼續支持，但是需要引入vue-class-component@next，該模塊目前還處在 alpha 階段。
還有Vue 3 + TypeScript 插件正在開發，有類型檢查，自動補全等功能。目前進展可喜。
8. Custom Renderer API：自定義渲染器 API用戶可以嘗試WebGL自定義渲染器，與普通 Vue 應用程式一起使用（Vugel）。
意味著以後可以通過 vue， Dom 編程的方式來進行 webgl 編程 。感興趣可以看這裡：Getting started vugel
9. 剩餘工作9.1 Docs & Migration Guides新的文檔編寫交由@NataliaTepluhina, @sdras, @bencodezen & @phanan 負責9.2 Router下一代 Router：vue-router@next已在alpha階段，感謝@posva
有部分的API變動，可到RFC上看。
9.3 Vuex
`
下一代Vuex：，vuex@next（與Vue 3 compat相同的 API），已在alpha階段，感謝@KiaKing。
目前以兼容Vue 3為主，基本上沒有API變動，莫慌。
9.4 CLICLI插件：vue-cli-plugin-vue-nextby @sodatea9.5 新工具：vite（法語 「快」）
地址：https://github.com/vuejs/vite
一個簡易的http伺服器，無需webpack編譯打包，根據請求的Vue文件，直接發回渲染，且支持熱更新（非常快）
9.6 vue-test-utils下一代test-utils:test-utils@nextby @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs9.7 DevTools早期的原型已經由@Akryum 完成，當我們到beta時，將完全集成。
目前需要花更多精力去完善。
9.8 IDE Support (Vetur)@octref將在 5 月為Vue 3進行Vetur集成9.9 Nuxt
目前Nuxt的整合工作也正在進行中，內部團隊已經跑起來了。還需要時間磨合
10 Vue 2.x還有 2.7 版本從Vue 3向後移植兼容的改進(不損壞兼容性前提下)
最後建議：Vue 3雖好，如果你的項目很穩定，且對新功能無過多的要求或者遷移成本過高，則不建議升級。
結束
花了一宿反覆回放整理出來的，如有錯誤，盡情諒解。
附：直播中用到的渲染模板查看工具地址：https://vue-next-template-explorer.netlify.app/