vue3的進步

剛剛看了 Vue.js做者在 VueConf 2019上海的演講視頻，學習到了不少的東西。瞭解了 vue在全球的影響力、活躍的社區以及核心開發團隊，更主要的是 vue2當前的一些問題和在 vue3中的一些進步。下面我總結了從中學習到的幾點。

vdom

1. 性能瓶頸

新vdom生成：
當數據更新時，雖然vue能夠定位到最小更新粒度爲組件級別，但在組件級別內，仍是須要從新遍歷模板生成新的vdom，更新粒度不夠小。

diff算法：diff的工做量和組件模板大小成正相關。即便模板內只有少許的動態節點，也須要遍歷整個組件去執行diff。

總結：vdom的更新粒度不夠靈活，致使生成新的vnode和新舊vnode diff過程當中，作了不少無用功，致使浪費性能.

2. 緣由

vdom是從react而來的，jsx和手寫的render function是徹底動態的，過分的靈活性致使沒法收集優化的信息，即你沒法解讀js的代碼，來區分靜態節點和動態節點。

以下圖，很難識別出：只有div下的第二個p是動態節點。

3. 解決方案

react時間分片

在動態節點和數據的量都很大時，那麼在數據更新時，js線程就會用很長的時間來執行vdom的相關計算，若是超過了16ms，形成交互或動畫等等卡頓現象。而時間分片就是把vdom的大量計算分紅多個小任務，保證每一個小任務在16ms內執行完，從而不會阻塞用戶交互，避免卡頓現象。

即react認可vdom的這些缺點，而後它從其餘的層面來彌補缺點帶來的問題。

vue縮小更新粒度

最大化利用的模板信息，把更新的粒度從組件縮小到代碼塊。

即從組件模板中提取出動態節點、動態代碼塊，作diff時，只須要比較這些動態區域，而忽略掉靜態節點，從而提高性能。

再好比一個節點僅僅class屬性爲動態的，那麼只須要diff這一個屬性便可。進一步提高了性能。

總結：vdom的更新性能將與動態內容的數量相關，而不是模板總體大小。

function-based API

優點1：更好的支持TS類型推導

優點2：Tree-shaking友好

經常使用的API value、computed、watch等都是從vue中使用import引進來的，因此支持tree-shaking。即若是沒有使用這些api，那麼這些相應的代碼就不會被打包，縮小了文件大小。

優點3：代碼更容易被壓縮

對象屬性通常是不會被壓縮的，而變量名是能夠被壓縮的

優點4：邏輯複用

邏輯複用有不少種方案，都有一些缺點：

1. mixins

• 命名空間衝突（多個mixins，不能保證變量名不會衝突）
• 數據來源不清晰（多個mixins時，使用的變量就不易分辨它的來源）

2. 高階組件

• props命名空間衝突
• props數據來源不清晰
• 額外的組件實例性能消耗

3. 做用域插槽

• 額外的組件實例性能消耗

而在vue3中邏輯複用會有不一樣的方式：

能夠發現和 react hook邏輯封裝形式很像，就是在組件內定義響應式的變量，並封裝變量更改的邏輯，在最後把變量暴露出來，供其餘組件使用。

視頻地址