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

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

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

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

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

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

　　　　1.權(quán)限的問題，只要涉及到權(quán)限相關(guān)的展示用v-if比較好

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

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

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

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

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

　　2.使用動(dòng)畫時(shí)可以用CSS啟動(dòng)硬件加速，

　　　　CSS animations, transforms 以及 transitions 不會(huì)自動(dòng)開啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來執(zhí)行,那我們?cè)鯓硬趴梢郧袚Q到GPU模式呢，很多瀏覽器提供了某些觸發(fā) 的CSS規(guī)則，可以用transform: translateZ(0); 來開啟硬件加速，transform: translate3d(0, 0, 0)也可以。

　　3.組件懶加載，

　　　　這個(gè)很有用的，例如，當(dāng)我們?cè)谝粋€(gè)很長的頁面時(shí)，用戶可能只會(huì)去看前一兩屏，那剩下沒被用用戶觀看的組件也會(huì)被加載，這樣就會(huì)浪費(fèi)我們的資源，我們使用組件懶加載在阻止性能浪費(fèi)

　　4.為item設(shè)置唯一key值，

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

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

　　　　因?yàn)楫?dāng)watch的數(shù)據(jù)比較大的時(shí)候，會(huì)大量消耗性能，所以我們可以使用事件中央總線或者Vuex進(jìn)行數(shù)據(jù)的變更操作

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

　　6.圖片按需加載，這個(gè)算是基礎(chǔ)操作了吧

　　7.SSR（服務(wù)端渲染）

　　　　如果項(xiàng)目比較大，首屏無論怎么做優(yōu)化，都出現(xiàn)閃屏或者一陣黑屏的情況?？梢钥紤]使用SSR(服務(wù)端渲染)

　　8.骨架屏加載

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

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

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

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

　　　　換用cdn直接引入到我們項(xiàng)目的根目錄的html當(dāng)中，

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

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

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