敲黑板記筆記了：尤雨溪在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：可以將無用模塊“剪輯”，僅打包需要的。
• 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.5kb11.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（法語 “快”）

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

9.6 vue-test-utils

• 下一代test-utils:test-utils@nextby @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雖好，如果你的項目很穩定，且對新功能無過多的要求或者遷移成本過高，則不建議升級。

結束

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