Vue性能優(yōu)化的方法
今天來談一談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)文章！
相關(guān)文章
記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue模仿ElementUI的form表單實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue模仿ElementUI的form表單的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
聊聊Vue中provide/inject的應(yīng)用詳解
這篇文章主要介紹了聊聊Vue中provide/inject的應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了VUE3 click點(diǎn)擊事件及修飾符的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
在vue項(xiàng)目中env是全局配置文件,可以存儲(chǔ)不同環(huán)境下的變量,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目配置env的方法步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作全解析
這篇文章主要為大家詳細(xì)介紹了Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
Vue.js允許自定義過濾器，過濾器的作用可被用于一些常見的文本格式化（也就是修飾文本，但是文本內(nèi)容不會(huì)改變），本文主要來和大家講講過濾器filters的使用，感興趣的可以了解一下2023-04-04
詳解 vue better-scroll滾動(dòng)插件排坑
本篇文章主要介紹了詳解 vue better-scroll滾動(dòng)插件排坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
在本篇文章里我們給大家分享了關(guān)于vue的v-if使用方法的相關(guān)知識(shí)點(diǎn)，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應(yīng)高度的相關(guān)資料,Element UI的Table組件默認(rèn)情況下是沒有自適應(yīng)高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下2023-08-08