Vue.js 3.0 Beta
前言
在4月21日晚，Vue作者尤雨溪在嗶哩嗶哩直播分享了Vue.js 3.0 Beta最新進展。 以下是直播內容整理。
Vue.js 作者尤雨溪：聊聊 Vue.js 3.0 Beta：B站錄播地址
本文轉載自：原文章鏈接
1. 全新文檔RFCs
Vue.js 3.0 Beta發佈後的工作重點是保證穩定性和推進各類庫集成
所有的進度和文檔都將在全新RFCs文檔可以看到。
2. 六大亮點
Performance：性能更比Vue 2.0強。Tree shaking support：可以將無用模塊“剪輯”，僅打包需要的。Composition API：組合APIFragment, 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,<transition>，用不到就不會打包）。 - 一個簡單“
HelloWorld”大小僅爲：13.5kb- 11.75kb，僅
Composition API。
- 11.75kb，僅
- 包含運行時完整功能：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：其它的均爲常見的工具函數，可先忽略不看。
6. Fragment
Fragment翻譯爲：“碎片”
6.1 <Teleport>
- 以前稱爲
<Portal>，譯作傳送門。 - 更多細節將由@Linusborg 分享
<Teleport>原先是對標 React Portal（增加多個新功能，更強）
但因爲Chrome有個提案，會增加一個名爲Portal的原生element，爲避免命名衝突，改爲Teleport
6.2 <Suspense>
)Suspense翻譯爲：“懸念”
- 可在嵌套層級中等待嵌套的異步依賴項
- 支持
async setup() - 支持異步組件
雖然React 16引入了Suspense，但直至現在都不太能用。如何將其與異步數據結合，還沒完整設計出來。
Vue 3 的<Suspense>更加輕量：
僅5%應用能感知運行時的調度差異，綜合考慮下，Vue3 的<Suspense> 沒和React一樣做運行調度處理
7. 更好的TypeScript支持
Vue 3是用TypeScript編寫的庫，可以享受到自動的類型定義提示JavaScript和TypeScript中的API是相同的。- 事實上，代碼也基本相同
- 支持
TSX class組件還會繼續支持，但是需要引入vue-class-component@next，該模塊目前還處在 alpha 階段。
還有Vue 3 + TypeScript 插件正在開發，有類型檢查，自動補全等功能。目前進展可喜。
8. Custom Renderer API：自定義渲染器API
- 正在進行
NativeScript Vue集成 - 用戶可以嘗試
WebGL自定義渲染器，與普通Vue應用程序一起使用（Vugel）。
意味着以後可以通過 vue， Dom 編程的方式來進行 webgl 編程 。感興趣可以看這裏：Getting started vugel
9. 剩餘工作
9.1 Docs & Migration Guides
- 新的文檔編寫交由
@NataliaTepluhina, @sdras, @bencodezen & @phanan負責 @sdras正在做自動升級遷移工具@sodatea已經開始研究CodeMods
9.2 Router
- 下一代
Router：vue-router@next已在alpha階段，感謝@posva
9.3 Vuex
`
- 下一代
Vuex：，vuex@next（與Vue 3 compat相同的API），已在alpha階段，感謝@KiaKing。 - 團隊正在爲下一次迭代試驗
Vuex API的簡化
9.4 CLI
9.5 新工具：vite（法語 “快”）
地址：github.com/vuejs/vite
一個簡易的http服務器，無需webpack編譯打包，根據請求的Vue文件，直接發回渲染，且支持熱更新（非常快）
9.6 vue-test-utils
9.7 DevTools
- 早期的原型已經由@Akryum 完成，當我們到
beta時，將完全集成。
9.8 IDE Support (Vetur)
9.9 Nuxt
目前Nuxt的整合工作也正在進行中，內部團隊已經跑起來了。還需要時間磨合
10. Vue 2.x還有2.7版本
- 將有最後一個小版本（2.7）
- 從
Vue 3向後移植兼容的改進(不損壞兼容性前提下) - 加上在
Vue 3中刪除的功能的棄用警告 LTS118個月。
最後建議：Vue 3雖好，如果你的項目很穩定，且對新功能無過多的要求或者遷移成本過高，則不建議升級。
結束
附：直播中用到的渲染模板查看工具地址：vue-next-template-explorer.netlify.app/
彩蛋(護髮素)
- 裕波——提問：
- 最後最後一個問題，剛纔在直播的時候，很多人看到我的頭髮沒有了，小尤的頭髮非常多，怎麼保護好髮際線，有沒有什麼好的護髮素？
- 尤雨溪——回答：
- 其實，我的頭髮也不是很多了。這個，嘖，也是一個比較困擾的問題，人到中年，我只是帶着耳機看着還有點，而且我已經兩個多月沒理髮了，現在這個疫情之下都沒辦法理髮，所以就很尷尬。但是就是，說實話我也頭痛這個問題，所以有什麼好的護髮素給我推薦一下唄！
- 其實，我的頭髮也不是很多了。這個，嘖，也是一個比較困擾的問題，人到中年，我只是帶着耳機看着還有點，而且我已經兩個多月沒理髮了，現在這個疫情之下都沒辦法理髮，所以就很尷尬。但是就是，說實話我也頭痛這個問題，所以有什麼好的護髮素給我推薦一下唄！
- 幽默的程序猿總是擅長自嘲，由此來慰藉自己樸實無華且枯燥的生活。大家可以自己找錄播的完整視頻看下，hhhh。