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
- 更先進(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樹全量的對(duì)比。
vue3.0的diff算法在創(chuàng)建虛擬dom的時(shí)候，會(huì)根據(jù)dom中的內(nèi)容是否發(fā)生變化，添加靜態(tài)標(biāo)記。只對(duì)比帶有patch flag的節(jié)點(diǎn)。
vue3.0 diff算法優(yōu)化
我們可能看上面這個(gè)圖不是很明白，那我們就用另一種方式直觀看下。你們可以看到下圖中存在數(shù)據(jù)綁定的元素中存在靜態(tài)標(biāo)記1，測(cè)試網(wǎng)址：https://vue-next-template-explorer.netlify.app/。
靜態(tài)標(biāo)記
- 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)建一次，這樣性能就明顯提升了。
靜態(tài)提升
- cacheHandlers（事件偵聽器緩存）
默認(rèn)情況下，如onClick事件會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)追蹤它的變化，但是因?yàn)槭峭粋€(gè)函數(shù)，所以不用追蹤變化，直接緩存起來(lái)復(fù)用即可。好，我們來(lái)對(duì)比一下開啟事件偵聽器緩存前后。
未開啟事件偵聽器緩存
我們會(huì)看到有一個(gè)靜態(tài)標(biāo)記，所以每次都會(huì)追蹤。
未開啟
開啟事件偵聽器緩存
在事件偵聽器緩存前打上對(duì)號(hào)，開啟。我們看到?jīng)]有了靜態(tài)標(biāo)記，就沒(méi)有對(duì)比追蹤了，性能就提升了。
開啟
