尤雨溪在直播中講到的Vue3.0 Beta的那些特性,快記筆記了

 

前言

在那天風雨交加的夜晚,Vue的創做者尤雨溪尤大大在b站直播分享了Vue.js 3.0 Beta最新進展.我對直播的內容進行了一下整理.整整用了三天的空餘時間遇上了

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

 

 

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

2. 編譯模板的優化。

3. 更高效的組件初始化。

4. update性能提升1.3~2倍。

5. 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：其它的均爲常見的工具函數，可先忽略不看。

6. Fragment

 

 

Fragment翻譯爲：「碎片」

• 再也不限於模板中的單個根節點

• render 函數也能夠返回數組了，相似實現了 React.Fragments 的功能 。

• 'Just works'

6.1 ``

 

 

• 之前稱爲``，譯做傳送門。

• 更多細節將由@Linusborg 分享

`原先是對標React Portal`（增長多個新功能，更強）

但由於Chrome有個提案，會增長一個名爲Portal的原生element，爲避免命名衝突，改成Teleport

6.2 ``

 

 

Suspense翻譯爲：「懸念」

• 可在嵌套層級中等待嵌套的異步依賴項

• 支持async setup()

• 支持異步組件

雖然React 16引入了Suspense，但直至如今都不太能用。如何將其與異步數據結合，還沒完整設計出來。

Vue 3 的``更加輕量：

僅5%應用能感知運行時的調度差別，綜合考慮下，Vue3 的`` 沒和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

有部分的API變更，可到RFC上看。

9.3 Vuex

 

`

 

• 下一代Vuex：，vuex@next（與Vue 3 compat相同的API），已在alpha階段，感謝@KiaKing。

• 團隊正在爲下一次迭代試驗Vuex API的簡化

目前以兼容Vue 3爲主，基本上沒有API變更，莫慌。

9.4 CLI

 

 

• CLI插件：vue-cli-plugin-vue-nextby @sodatea

• （wip）CodeMods支持升級Vue 2應用

9.5 新工具：vite（法語 「快」）

 

地址：github.com/vuejs/vite

一個簡易的http服務器，無需webpack編譯打包，根據請求的Vue文件，直接發回渲染，且支持熱更新（很是快）

9.6 vue-test-utils

 

 

• 下一代

  test-utils

  :

  test-utils@next

  • by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

9.7 DevTools

 

 

• 早期的原型已經由@Akryum 完成，當咱們到beta時，將徹底集成。

目前須要花更多精力去完善。

9.8 IDE Support (Vetur)

 

 

• @znck目前正在試驗模板的類型檢查

• @octref將在5月爲Vue 3進行Vetur集成

9.9 Nuxt

 

 

目前Nuxt的整合工做也正在進行中，內部團隊已經跑起來了。還須要時間磨合

10. Vue 2.x還有2.7版本

 

 

• 將有最後一個小版本（2.7）

• 從Vue 3向後移植兼容的改進(不損壞兼容性前提下)

• 加上在Vue 3中刪除的功能的棄用警告

• LTS1 18個月。

最後建議：Vue 3雖好，若是你的項目很穩定，且對新功能無過多的要求或者遷移成本太高，則不建議升級。

更多前端學習內容文章乾貨請關注個人專欄(不斷更新)

阿里名廠標準web前端高級工程師教程目錄大全,從基礎到進階,看完保證您的薪資上升一個臺階

在這裏我給你們準備了不少的學習資料:

其實你與阿里工程師的差距只差這些東西

結束

若有錯誤，盡情諒解。若是以爲還能夠,你們能夠給個關注