聊聊昨晚尤雨溪現場針對Vue3.0 Beta版本新特性知識點彙總

作者：前端勸退師

轉發鏈接：

https://mp.weixin.qq.com/s/MQues_aqTBeQ_6g8uVT9Tw

前言

在 4 月 21 日晚，Vue 作者尤雨溪在嗶哩嗶哩直播分享了Vue.js 3.0 Beta最新進展。以下是直播內容整理

想學Vue的小夥伴們，小編這幾個月陸陸續續收集整理了幾十篇關於Vue的學習相關文章以及項目開發中的總結，相關Vue學習資料文章請見本篇文章底部

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

假設要編譯以下代碼

<code>
<
div
>
 
  
<
span
/>
  
< 
span
>
{{ msg }}
span
>
div
>
/<code>

將會被編譯成以下模樣：

<code>
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
  )
  ]))
}

/<code>

注意看第二個_createVNode結尾的“1”：

Vue 在運行時會生成number（大於 0）值的PatchFlag，用作標記。

僅帶有PatchFlag標記的節點會被真正追蹤，且無論層級嵌套多深，它的動態節點都直接與Block根節點綁定，無需再去遍歷靜態節點

再看以下例子：

<code>
<
div
>

  
<
span
>
static
span
>

  
 
<
span
 
:id
=
"hello"
 
class
=
"bar"
>
{{ msg }}   
span
>

div
>
/<code>

會被編譯成：

<code>
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
  , [
"id"
])
  ]))
}/<code>

PatchFlag 變成了9 /* TEXT, PROPS */, ["id"]

它會告知我們不光有TEXT變化，還有PROPS變化（id）

這樣既跳出了virtual dom性能的瓶頸，又保留了可以手寫render的靈活性。等於是：既有react的靈活性，又有基於模板的性能保證。

要點 2: 事件監聽緩存：cacheHandlers

假設我們要綁定一個事件：

<code>
<
div
>

  
<
span
 @
click
=
"onClick"
>

    {{msg}}
  
span
>

div
>
/<code>

關閉cacheHandlers後：

<code>
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
  , [
"onClick"
])
  ]))
}/<code>

onClick會被視為PROPS動態綁定，後續替換點擊事件時需要進行更新。

開啟cacheHandlers後：

<code>
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
  )
  ]))
}/<code>

cache[1]，會自動生成並緩存一個內聯函數，“神奇”的變為一個靜態節點。Ps：相當於React中useCallback自動化。

並且支持手寫內聯函數：

<code>
<
div
>

  
<
span
 @
click
=
"()=>foo()"
>

    {{msg}}
  
span
> 

div
>
/<code>

補充：PatchFlags枚舉定義

而通過查詢Ts枚舉定義，我們可以看到分別定義了以下的追蹤標記：

感興趣的可以看源碼：
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可以實現更靈活且無副作用的複用代碼。

感興趣的可以查看：
https://composition-api.vuejs.org/#summary

Composition API包含了六個主要API

可以到這裡查看：

https://composition-api.vuejs.org/api.html#setup

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（法語 “快”）

地址：
https://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雖好，如果你的項目很穩定，且對新功能無過多的要求或者遷移成本過高，則不建議升級。

結束

花了一宿反覆回放整理出來的，如有錯誤，盡情諒解。

附：直播中用到的渲染模板查看工具地址：
https://vue-next-template-explorer.netlify.app/

❤️ 看完三件事

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙：

1. 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
2. 關注我，不定期分享前端知識。
3. 也看看其它文章

推薦Vue學習相關文章

《【新消息】Vue 3.0 Beta 版本發佈，你還學的動麼？》

《Vue真是太好了 壹萬多字的Vue知識點 超詳細!》

《Vue + Koa從零打造一個H5頁面可視化編輯器——Quark-h5》

《深入淺出Vue3 跟著尤雨溪學 TypeScript 之 Ref 【實踐】》

《

手把手教你深入淺出vue-cli3升級vue-cli4的方法》

《Vue 3.0 Beta 和React 開發者分別槓上了》

《手把手教你用vue drag chart 實現一個可以拖動 / 縮放的圖表組件》

《Vue3 嚐鮮》

《總結Vue組件的通信》

《手把手讓你成為更好的Vue.js開發人員的12個技巧和竅門【實踐】》

《Vue 開源項目 TOP45》

《2020 年，Vue 受歡迎程度是否會超過 React？》

《尤雨溪：Vue 3.0的設計原則》

《使用vue實現HTML頁面生成圖片

》

《實現全棧收銀系統（Node+Vue）（上）》

《實現全棧收銀系統（Node+Vue）（下）》

《vue引入原生高德地圖》

《Vue合理配置WebSocket並實現群聊》

《多年vue項目實戰經驗彙總》

《vue之將echart封裝為組件》

《基於 Vue 的兩層吸頂踩坑總結》

《Vue插件總結【前端開發必備】》

《Vue 開發必須知道的 36 個技巧【近1W字】》

《

構建大型 Vue.js 項目的10條建議》

《深入理解vue中的slot與slot-scope》

《手把手教你Vue解析pdf(base64)轉圖片【實踐】》

《使用vue+node搭建前端異常監控系統》

《推薦 8 個漂亮的 vue.js 進度條組件》

《基於Vue實現拖拽升級（九宮格拖拽）》

《手摸手，帶你用vue擼後臺 系列二(登錄權限篇)》

《手摸手，帶你用vue擼後臺 系列三(實戰篇)》

《前端框架用vue還是react？清晰對比兩者差異》

《Vue組件間通信幾種方式，你用哪種？【實踐】

》

《淺析 React / Vue 跨端渲染原理與實現》

《10個Vue開發技巧助力成為更好的工程師》

《手把手教你Vue之父子組件間通信實踐講解【props、$ref 、$emit】》

《1W字長文+多圖，帶你瞭解vue的雙向數據綁定源碼實現》

《深入淺出Vue3 的響應式和以前的區別到底在哪裡？【實踐】》

《乾貨滿滿!如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)》

《基於Vue/VueRouter/Vuex/Axios登錄路由和接口級攔截原理與實現》

《手把手教你D3.js 實現數據可視化極速上手到Vue應用》

《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【上】》

《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【中】》

《吃透 Vue 項目開發實踐｜16個方面深入前端工程化開發技巧【下】》

作者：前端勸退師

轉發鏈接：
https://mp.weixin.qq.com/s/MQues_aqTBeQ_6g8uVT9Tw