Vue3.0系列——「vue3.0性能是如何變快的？」












前言

    先學(xué)習(xí)vue2.x，很多2.x內(nèi)容依然保留；
    先學(xué)習(xí)TypeScript，vue3.0是用TS重寫的，想知其然知其所以然必須學(xué)習(xí)TS。

為什么學(xué)習(xí)vue3.0？

    性能比vue2.x快1.2～2倍
    按需編譯，體積比vue2.x更小
    組合API（類似React Hook）
    更好的TS支持
    暴露了自定義渲染API
    更先進的組件

vue3.0是如何變快的？

    diff方法優(yōu)化
    vue2.x中的虛擬dom是進行全量的對比。而vue3.0新增了靜態(tài)標記。在與上次虛擬節(jié)點進行對比的時候，只對比帶有patch flag的節(jié)點，并且可以通過flag的信息得知當(dāng)前節(jié)點要對比的具體內(nèi)容。

下面我們來舉個例子，以下是代碼片段。

<div>
  <p>標簽</p>
  <p>{{msg}}</p>
</div>



vue2.x的diff算法是對虛擬dom樹全量的對比。

vue3.0的diff算法在創(chuàng)建虛擬dom的時候，會根據(jù)dom中的內(nèi)容是否發(fā)生變化，添加靜態(tài)標記。只對比帶有patch flag的節(jié)點。



我們可能看上面這個圖不是很明白，那我們就用另一種方式直觀看下。你們可以看到下圖中存在數(shù)據(jù)綁定的元素中存在靜態(tài)標記1，測試網(wǎng)址：https://vue-next-template-explorer.netlify.app/。



    hoistStatic（靜態(tài)提升）

vue2.x中無論元素是否參與更新，每次都會重新創(chuàng)建，然后再渲染。vue3.0中對于不參與更新的元素，會做靜態(tài)提升，只會被創(chuàng)建一次，在渲染時直接復(fù)用即可。

我們再來去那個測試網(wǎng)站，在靜態(tài)標記的選項前面打上對號，這時我們會發(fā)現(xiàn)不同，右邊之前數(shù)據(jù)固定不變的標簽，也就是這里的<p>標簽</p>，被放在了render函數(shù)的外面。所以這樣只會在全局創(chuàng)建一次，這樣性能就明顯提升了。



    cacheHandlers（事件偵聽器緩存）

默認情況下，如onClick事件會被視為動態(tài)綁定，所以每次都會追蹤它的變化，但是因為是同一個函數(shù)，所以不用追蹤變化，直接緩存起來復(fù)用即可。
好，我們來對比一下開啟事件偵聽器緩存前后。

未開啟事件偵聽器緩存

我們會看到有一個靜態(tài)標記，所以每次都會追蹤。


開啟事件偵聽器緩存

在事件偵聽器緩存前打上對號，開啟。我們看到?jīng)]有了靜態(tài)標記，就沒有對比追蹤了，性能就提升了。



作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路