今天來談一談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的數據，在有可能的前提下，減少沒有必要的state數據

因為當watch的數據比較大的時候，會大量消耗性能，所以我們可以使用事件中央總線或者Vuex進行數據的變更操作

為什么要減少沒有必要的state數據，這和Vue的響應式原理有關，Vue會使用 Object.defineProperty 把這些屬性全部轉為 getter/setter ,并建立相應的Watcher來監控，這就造成一個問題，當我們的state特別多時，對應的Watcher也就會特別多，容易造成卡頓，這也是為什么在大型項目（狀態特別多）我們會選用React而不用Vue的原因

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

7.SSR（服務端渲染）

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

8.骨架屏加載

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

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

9.打包時的優化

有時候我們打完包之后發現包會很大，那怎么解決這個問題呢，其實很簡單，在項目中，我們不是引入了諸如axios，vuex，vue-router等的包嗎，那我們將這些包剔除出去，

換用cdn直接引入到我們項目的根目錄的html當中，

注意在 webpack 里有個 externals配置，可以忽略不需要打包的庫

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

以上就是Vue性能優化的方法的詳細內容，更多關于Vue性能優化的資料請關注好吧啦網其它相關文章！