Vue 3.0都帶來了哪些變化

請相信，這個世界上來真的有人在過著你想過的生活斟览，愿你我既可以朝九晚五轴猎，又能夠浪跡天涯

微信圖片_20200508000823.jpg

遲到了，遲到了廓脆，距離4月21號尤雨溪在嗶哩嗶哩直播分享vue3.0 beta更新已經(jīng)近一個月的時間筛谚，下面我們來一起看看尤大大究竟嘚吧了些啥。

全新的文檔

image.png

vue3.0 beta發(fā)布之后的所有進度及文檔都將在全新的RFS文檔中可以看到https://github.com/vuejs/rfcs/

六大亮點

image.png

performance：性能比vue2.0更強
tree-shaking support：可以僅打包真正需要的模塊
Composition API：組合API停忿，這將是一大兩點驾讲，可參考http://www.reibang.com/p/687a393e788a
Fragment, Teleport, Suspense：碎片，protal傳送門，懸念
Better TypeScript support：更優(yōu)秀的Ts支持吮铭，這一點也是我比較期待的时迫，在這個前端必須掌握TS的時代，這是大勢所趨
Custom Renderer API：暴露了自定義渲染API

性能

image.png

重寫了虛擬DOM的實現(xiàn)
編譯模板的優(yōu)化
更高效的組件初始化
update性能提升1.3~2倍
SSR（http://www.reibang.com/p/b6f288048a72
）速度提高了2~3倍
各項性能對比圖

image.png

編譯模板的優(yōu)化

image.png

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

Vue在運行時會生成number（大于0）值的PatchFlag谓晌，用作標記掠拳。

image.png

僅帶有PatchFlag標記的節(jié)點會被真正追蹤，且無論層級嵌套多深纸肉，它的動態(tài)節(jié)點都直接與Block根節(jié)點綁定溺欧，無需再去遍歷靜態(tài)節(jié)點

image.png

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

在vue的編譯中會成為：

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的靈活性，又有基于模板的性能保證烦味。

時間監(jiān)聽緩存： cacheHandlers

image.png

<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動態(tài)綁定聂使，后續(xù)替換點擊事件時需要進行更新。
開啟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]谬俄，會自動生成并緩存一個內聯(lián)函數(shù)柏靶，“神奇”的變?yōu)橐粋€靜態(tài)節(jié)點。 Ps：相當于React中useCallback自動化溃论。

PatchFlags枚舉定義

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

export const enum PatchFlags {
  
  TEXT = 1,// 表示具有動態(tài)textContent的元素
  CLASS = 1 << 1,  // 表示有動態(tài)Class的元素
  STYLE = 1 << 2,  // 表示動態(tài)樣式（靜態(tài)如style="color: red"，也會提升至動態(tài)）
  PROPS = 1 << 3,  // 表示具有非類/樣式動態(tài)道具的元素蔬芥。
  FULL_PROPS = 1 << 4,  // 表示帶有動態(tài)鍵的道具的元素，與上面三種相斥
  HYDRATE_EVENTS = 1 << 5,  // 表示帶有事件監(jiān)聽器的元素
  STABLE_FRAGMENT = 1 << 6,   // 表示其子順序不變的片段（沒懂）控汉。 
  KEYED_FRAGMENT = 1 << 7, // 表示帶有鍵控或部分鍵控子元素的片段笔诵。
  UNKEYED_FRAGMENT = 1 << 8, // 表示帶有無key綁定的片段
  NEED_PATCH = 1 << 9,   // 表示只需要非屬性補丁的元素，例如ref或hooks
  DYNAMIC_SLOTS = 1 << 10,  // 表示具有動態(tài)插槽的元素
  // 特殊 FLAGS -------------------------------------------------------------
  HOISTED = -1,  // 特殊標志是負整數(shù)表示永遠不會用作diff,只需檢查 patchFlag === FLAG.
  BAIL = -2 // 一個特殊的標志姑子，指代差異算法（沒懂）
}

Tree shaking support

image.png

可以將無用的模塊干掉（比如v-model,<transition>乎婿，用不到就不會打包）
一個簡單的一個簡單“HelloWorld”大小僅為：13.5kb
-- 11.75kb，僅Composition API街佑。
包含運行時完整功能：22.5kb
-- 擁有更多的功能谢翎，卻比Vue 2更迷你。
很多時候沐旨，我們并不需要 vue提供的所有功能森逮，在 vue 2 并沒有方式排除掉，但是 3.0 都可能做成了按需引入磁携。

Composition API

image.png

可與現(xiàn)有的Options API一起使用
靈活的邏輯組合與復用
vue3.0的響應式模塊可以和其他框架搭配使用

混入(mixin) 將不再作為推薦使用褒侧， Composition API可以實現(xiàn)更靈活且無副作用的復用代碼
官網(wǎng)https://composition-api.vuejs.org/#summary

fragment

image.png

fragment翻譯為： “碎片”

不再限于模板中的單個根節(jié)點（之前的vue文件是必須有一個根節(jié)點）
render函數(shù)也可以返回數(shù)組，類似實現(xiàn)了React.Fragments 的功能
just works，一句話闷供，就干正事

teleport

image.png

以前稱為<Portal>https://www.dazhuanlan.com/2019/10/05/5d98173a7627a/?cf_chl_jschl_tk=b1df84b1bda015c7e06f22dd75c601c3c788273f-1589730369-0-AcsiZGPFJijG6qg2folCqdjBQaFTHgpEFf6G-NyddhLFugzBPc-2G3MHOEuzwNRDuyFth6-60dEXJnVk_FsFPsNbxTn8ClkrvLLwGPJxPIvqq25A_YARa782HjsmRsXy3Fyuyyh9d1AwTCi4bgWekEnNnClx__VfV3eE3GuFCorI1o-ALzWU4lLrerftTTeU3sV0G7mwPLBXWIgYCSijJliJtAZfG7SYp9SjqoV13NoFTcJ7aQ0MWL0G35F4tbXwWmw7DhP686ZzVNi3pVk3UiDjc_g5viJ0xF-5UvfOtzYNcZbILk9zmPCYEW7L-YIyAA
烟央，譯作傳送門。
<Teleport>原先是對標 React Portal（增加多個新功能歪脏，更強）

但因為Chrome有個提案疑俭，會增加一個名為Portal的原生element，為避免命名沖突婿失，改為Teleport

<Suspense>

image.png

可在嵌套層級中等待嵌套的異步依賴項
支持async setup()
支持異步組件

更好的typeScript支持

image.png

vue3.0是用typescript編寫的庫钞艇，可以享受自動的類型定義提示
JavaScript和typescript中的API相同
-- 事實上，代碼也是幾乎相同的
支持TSX
仍然支持class組件(http://www.reibang.com/p/b8f031875829
)移怯，但是需要引用vue-class-component@next香璃，該模塊仍在alpha階段
還有Vue 3 + TypeScript 插件正在開發(fā)，有類型檢查舟误，自動補全等功能葡秒。目前進展可喜。(這是我對vue3最大的期待)