Vue效能優化

今天來談一談Vue中一些效能優化的問題，僅僅是個人使用中的一些小心得，來，今天我一句廢話不多說，直接上內容好吧

1.v-if和v-show的使用 ，

我們都知道這兩個都可以控制顯隱，那我們用哪個呢，個人覺得要從兩個方面入手來確定使用哪個，

1.許可權的問題，只要涉及到許可權相關的展示用v-if比較好

2.切換地頻率，如果頻繁的切換我們用v-show，不頻繁的切換用v-if

其實兩者各有優缺，就看你是怎麼選擇了，用v-if能減少頁面中的DOM總數，加快渲染的速度，而且我們要清楚一個事情

v-if 是'真正的'條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建.

v-if 也是惰性的 ,如果在初始渲染時條件為假,那麼什麼都不做- - 直到條件第一次為真的時候才會開始渲染條件塊,相比之下,v-show

就簡單得多- - 不管初始條件是什麼,元素總會被渲染,並且只是簡單的基於css進行切換.

2.使用動畫時可以用CSS啟動硬體加速 ，

CSS animations, transforms 以及 transitions 不會自動開啟GPU加速，而是由瀏覽器的緩慢的軟體渲染引擎來執行。                

那我們怎樣才可以切換到GPU模式呢，很多瀏覽器提供了某些觸 發 的CSS規則，可以用transform: translateZ(0); 來開啟硬體加速， transform: translate3d(0, 0, 0)也可以。

3.元件懶載入 ，

這個很有用的，例如，當我們在一個很長的頁面時，使用者可能只會去看前一兩屏，那剩下沒被用使用者觀看的元件也會被載入，這樣就會浪費我們的資源，我們使用元件懶載入在阻止效能浪費

4.為item設定唯一key值 ，

方便Vuex的內部機制在迴圈時能夠準確的找到該條列表資料

5.減少watch的資料 ，

因為當watch的資料比較大的時候，會大量消耗效能，所以我們可以使用事件中央匯流排或者Vuex進行資料的變更操作

6. 圖片按需載入，這個算是基礎操作了吧

7.SSR（服務端渲染）

如果專案比較大，首屏無論怎麼做優化，都出現閃屏或者一陣黑屏的情況。可以考慮使用SSR(服務端渲染)

8.骨架屏載入

在頁面載入資源較多，可能會出現白屏和閃屏的情況，體驗不好，這個時候我們可以使用骨架屏

（骨架屏就是在頁面內容未載入完成的時候，先使用一些圖形進行佔位，待內容載入完成之後再把它替換掉）

目前的總結的就是這些，如果以後想起來還有別的，我會再回來新增的，在下告辭，不用想我，我去用個早膳，一會就回來好吧