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

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

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

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

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

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

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

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

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

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

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

3.組件懶加載，

這個(gè)很有用的，例如，當(dāng)我們?cè)谝粋€(gè)很長(zhǎng)的頁(yè)面時(shí)，用戶可能只會(huì)去看前一兩屏，那剩下沒(méi)被用用戶觀看的組件也會(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來(lái)監(jiān)控，這就造成一個(gè)問(wèn)題，當(dāng)我們的state特別多時(shí)，對(duì)應(yīng)的Watcher也就會(huì)特別多，容易造成卡頓，這也是為什么在大型項(xiàng)目（狀態(tài)特別多）我們會(huì)選用React而不用Vue的原因

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

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

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

8.骨架屏加載

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

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

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

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

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

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

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

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