Ⅰ vue3 在哪些方便做了性能提升
概要
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。vue2版本階段已經證明了它的易用性和流行性，說明它已經足夠優秀在構建前端應用領域，而vue3的推出更是將性能提升做了最大的優化，更加易用、靈活、高效，未來是屬於vue3的時代，因此深入了解vue3相對vue2在哪些方面做了性能提升，怎麼提升性能的是非常有必要的。
編譯階優化段
在Vue2中，每個組件實例都對應一個 watcher 實例，它會在組件渲染的過程中把用到的數據property記錄為依賴，當依賴發生改變，觸發setter，則會通知watcher，從而使關聯的組件重新渲染
假如一個vue組件有如下模板結構：
可以看到，組件內部只有一個動態節點，剩餘一堆都是靜態節點，所以這里很多 diff 和遍歷其實都是不需要的，會造成性能浪費。因此，Vue3在編譯階段，做了進一步優化。主要有如下：
diff演算法優化
vue3在diff演算法中相比vue2增加了靜態標記關於這個靜態標記，其作用是為了會發生變化的地方添加一個flag標記，下次發生變化的時候直接找該地方進行比較，如下圖
靜態類型如下所示
靜態提升
Vue3中對不參與更新的元素，會做靜態提升，只會被創建一次，在渲染時直接復用這樣就免去了重復的創建節點，大型應用會受益於這個改動，免去了重復的創建操作，優化了運行時候的內存佔用
沒有做靜態提升之前
做了靜態提升之後
靜態內容_hoisted_1被放置在render 函數外，每次渲染的時候只要取 _hoisted_1 即可同時 _hoisted_1 被打上了 PatchFlag ，靜態標記值為 -1 ，特殊標志是負整數表示永遠不會用於 Diff
預字元串化
在平時vue開發過程中，組件當中沒有特別多的動態元素，大多都是靜態元素。比如：
在這個組件中，除了span元素是動態元素之外，其餘都是靜態節點，一般可以說是動靜比，動態內容 / 靜態內容，比例越小，靜態內容越多，比例越大，動態內容越多，vue3的編譯器它會非常智能地發現這一點，當編譯器遇到大量連續的靜態內容，會直接將它編譯為一個普通字元串節點，因為它知道這些內容永遠不會變化，都是靜態節點。
然而在vue2中，每個元素都會變成虛擬節點，一大堆的虛擬節點😱，這些全都是靜態節點，在vue3中它會智能地發現這一點。如下圖所示，我們可以很明顯的感受到vue3的巨大性能提升
緩存事件處理函數
比如存在如下事件處理函數
<button @click="count++">plus</button>
對比vue2和vue3的處理方式
在vue2中創建一個虛擬節點button，屬性裡面多了一個事件onclick，內容就是count++。在vue3中會認為這里的事件處理是不會變化的，不是說這次渲染是事件函數，下次就變成別的，於是vue3會智能地發現這一點，會做緩存處理，它首先會看一看緩存裡面有沒有這個事件函數，有的話直接返回，沒有的話就直接賦值為一個count++函數，保證事件處理函數只生成一次。
SSR優化
當靜態內容大到一定量級時候，會用createStaticVNode方法在客戶端去生成一個static node，這些靜態node，會被直接innerHtml，就不需要創建對象，然後根據對象渲染。
編譯前
編譯後
源碼體積有優化
與Vue2相比較，Vue3整體體積變小了，移除了一些比較冷門的feature：如 keyCode 支持作為 v-on 的修飾符、on、off 和 $once 實例方法、filter過濾、內聯模板等。tree-shaking 依賴 ES2015 模塊語法的靜態結構（即 import 和 export），通過編譯階段的靜態分析，找到沒有引入的模塊並打上標記。任何一個函數，如ref、reavtived、computed等，僅僅在用到的時候才打包，沒用到的模塊都被搖掉，打包的整體體積變小。
響應式實現優化
改用proxy api做數據劫持
響應式是惰性的
http://vue-next-template-explorer.netlify.app/