Vue優化

長列表效能優化

1. 不做響應式:
   比如會員列表、商品列表之類的，只是純粹的資料展示，不會有任何動態改變的場景下，就不需要對資料做響應化處理，可以大大提升渲染速度。
   Vue3 裡則是新增了響應式flag
2. 虛擬捲動:vue-virtual-scroller、vue-virtual-scroll-list

v-for 遍歷避免同時使用 v-if

列表使用唯一 key

使用 v-show 複用 DOM

無狀態的元件用函數式元件

子元件分割

變數在地化:把會多次參照的變數儲存起來

第三方外掛按需引入

路由懶載入

keep-alive快取頁面

比如在表單輸入頁面進入下一步後，再返回上一步到表單頁時要保留表單輸入的內容、比如在列表頁>詳情頁>列表頁，這樣來回跳轉的場景等

我們都可以通過內建元件 來把元件快取起來，在元件切換的時候不進行解除安裝，這樣當再次返回的時候，就能從快取中快速渲染，而不是重新渲染，以節省效能

• 也可以用 include/exclude 來 快取/不快取 指定元件
• 可通過兩個生命週期 activated/deactivated 來獲取當前元件狀態

事件的銷燬

Vue 元件銷燬時，會自動解綁它的全部指令及事件監聽器，但是僅限於元件本身的事件。

而對於定時器、addEventListener 註冊的監聽器等，就需要在元件銷燬的生命週期勾點中手動銷燬或解綁，以避免記憶體洩露。

圖片懶載入:

推薦一個第三方外掛 vue-lazyload
v-LazyLoad 代替 src

SSR優化