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

阿新 • • 發佈：2022-05-11

前言

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

為什麼學習vue3.0？

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

vue3.0是如何變快的？

diff方法優化
vue2.x中的虛擬dom是進行全量的對比。而vue3.0新增了靜態標記。在與上次虛擬節點進行對比的時候，只對比帶有patch flag的節點，並且可以通過flag的資訊得知當前節點要對比的具體內容。

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

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

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

vue3.0的diff演算法在建立虛擬dom的時候，會根據dom中的內容是否發生變化，新增靜態標記。只對比帶有patch flag的節點。

我們可能看上面這個圖不是很明白，那我們就用另一種方式直觀看下。你們可以看到下圖中存在資料繫結的元素中存在靜態標記1，測試網址：https://vue-next-template-explorer.netlify.app/。

hoistStatic（靜態提升）

vue2.x中無論元素是否參與更新，每次都會重新建立，然後再渲染。vue3.0中對於不參與更新的元素，會做靜態提升，只會被建立一次，在渲染時直接複用即可。

我們再來去那個測試網站，在靜態標記的選項前面打上對號，這時我們會發現不同，右邊之前資料固定不變的標籤，也就是這裡的標籤，被放在了render函式的外面。所以這樣只會在全域性建立一次，這樣效能就明顯提升了。