Vue性能優(yōu)化的方法

更新時間：2020年07月30日 10:05:31 作者：一只菜鳥攻城獅啊

這篇文章主要介紹了Vue性能優(yōu)化的方法，文中講解非常細致，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下

今天來談一談Vue中一些性能優(yōu)化的問題，僅僅是個人使用中的一些小心得，來，今天我一句廢話不多說，直接上內(nèi)容好吧

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

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

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

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

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

　　v-if是'真正的'條件渲染,因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建.

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

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

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

　　　　CSS animations, transforms 以及 transitions 不會自動開啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執(zhí)行,那我們怎樣才可以切換到GPU模式呢，很多瀏覽器提供了某些觸發(fā) 的CSS規(guī)則，可以用transform: translateZ(0); 來開啟硬件加速，transform: translate3d(0, 0, 0)也可以。

　　3.組件懶加載，

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

　　4.為item設置唯一key值，

　　　　方便Vuex的內(nèi)部機制在循環(huán)時能夠準確的找到該條列表數(shù)據(jù)

　　5.減少watch的數(shù)據(jù)，在有可能的前提下，減少沒有必要的state數(shù)據(jù)

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

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

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

　　7.SSR（服務端渲染）

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

　　8.骨架屏加載

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

　　　?。ü羌芷辆褪窃陧撁鎯?nèi)容未加載完成的時候，先使用一些圖形進行占位，待內(nèi)容加載完成之后再把它替換掉）

　　9.打包時的優(yōu)化

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

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

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

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

以上就是Vue性能優(yōu)化的方法的詳細內(nèi)容，更多關于Vue性能優(yōu)化的資料請關注腳本之家其它相關文章！