前言

• 先學(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樹(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)。

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（事件偵聽(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)啟

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

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

開(kāi)啟