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












前言

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

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

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

vue3.0是如何變快的？

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

下面我們來(lái)舉個(gè)例子，以下是代碼片段。

<div>
  <p>標(biāo)簽</p>
  <p>{{msg}}</p>
</div>



vue2.x的diff算法是對(duì)虛擬dom樹(shù)全量的對(duì)比。

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



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



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

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

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



    cacheHandlers（事件偵聽(tīng)器緩存）

默認(rèn)情況下，如onClick事件會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)追蹤它的變化，但是因?yàn)槭峭粋€(gè)函數(shù)，所以不用追蹤變化，直接緩存起來(lái)復(fù)用即可。
好，我們來(lái)對(duì)比一下開(kāi)啟事件偵聽(tīng)器緩存前后。

未開(kāi)啟事件偵聽(tīng)器緩存

我們會(huì)看到有一個(gè)靜態(tài)標(biāo)記，所以每次都會(huì)追蹤。


開(kāi)啟事件偵聽(tīng)器緩存

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



作者：Vam的金豆之路

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

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路