最全 Vue 性能優(yōu)化方案

當(dāng)涉及到 Vue 應(yīng)用的性能優(yōu)化時(shí)，有許多技術(shù)和策略可以幫助提升應(yīng)用的性能并改善用戶體驗(yàn)。以下總結(jié)了常用的十種 Vue 的性能優(yōu)化方案：

一、盡可能使用 v-show 替換 v-if

因?yàn)?v-show 本質(zhì)上是通過(guò) css 控制元素的顯示與隱藏，而 v-if 是通過(guò)操作 dom 來(lái)控制元素的顯示與隱藏，頻繁操作 dom 會(huì)導(dǎo)致性能有所影響

二、使用 v-for 必須添加 key

在刪除數(shù)據(jù)時(shí)，由于沒(méi)有綁定 key，不確定刪除的是哪個(gè)，就會(huì)把整個(gè)虛擬 dom 重新渲染，這樣對(duì)性能不太友好。

但如果設(shè)置了 key，比如 k 的值為 x，那么在刪除數(shù)據(jù)時(shí)候只會(huì)把 dom 為 x 的數(shù)據(jù)刪掉，并不會(huì)重新渲染整個(gè) dom。這樣一來(lái)對(duì)性能有很大的提高

三、避免 v-for 與 v-if 一起使用

當(dāng) v-for 和 v-if 結(jié)合使用時(shí)，Vue 需要在每次渲染時(shí)都重新計(jì)算列表中每個(gè)元素是否滿足 v-if 的條件，這會(huì)導(dǎo)致不必要的性能開銷。

如果將 v-if 放在父元素上時(shí)，v-for 會(huì)在每次重新渲染時(shí)都完整遍歷整個(gè)列表，判斷每個(gè)元素是否滿足條件。這樣也會(huì)導(dǎo)致性能下降，尤其在列表較大時(shí)更為明顯。

為了避免這種性能問(wèn)題，推薦的做法是將 v-if 放在包裹在元素內(nèi)部，而不是包裹在元素上，這樣可以減少不必要的遍歷次數(shù)，提升性能。

<div v-for="item in data" :key="item.id">
  <div v-if="item.condition">
    <!-- 具體元素內(nèi)容 -->
  </div>
</div>

四、合理使用 watch 和 computed

watch 適用于執(zhí)行異步或開銷較大的操作，或者需要對(duì)數(shù)據(jù)變化作出特定響應(yīng)的場(chǎng)景。

computed 用于根據(jù)已有的響應(yīng)式數(shù)據(jù)計(jì)算出一個(gè)新的值，它會(huì)根據(jù)相關(guān)的響應(yīng)式數(shù)據(jù)進(jìn)行緩存，只在相關(guān)響應(yīng)式數(shù)據(jù)改變時(shí)進(jìn)行重新計(jì)算。這樣可以避免不必要的重復(fù)計(jì)算，提高性能。

簡(jiǎn)單來(lái)說(shuō)： 使用 watch 監(jiān)聽數(shù)據(jù)變化，適合處理復(fù)雜操作或需要特定響應(yīng)的情況；使用 computed 計(jì)算屬性，可以根據(jù)已有數(shù)據(jù)計(jì)算新值并自動(dòng)緩存，提高性能。合理使用這兩個(gè)功能可以讓代碼更易讀和更高效。

組件緩存
組件緩存是指將組件的狀態(tài)緩存起來(lái)，當(dāng)組件再次被渲染時(shí)，可以直接使用緩存的狀態(tài)，而不需要重新渲染組件。

組件緩存的優(yōu)勢(shì)在于減少了組件的渲染次數(shù)，從而降低了開銷。它對(duì)于包含大量靜態(tài)內(nèi)容的組件，如輪播圖、靜態(tài)文章等組件的性能優(yōu)化特別有效。因?yàn)檫@些組件的內(nèi)容往往不會(huì)隨著數(shù)據(jù)變化而發(fā)生改變，使用組件緩存可以將組件的渲染次數(shù)降至最低。

五、使用路由懶加載

{
    path: '/login',
    component: () => import('@/views/login/index'),
}

1. 減輕初始加載： 通過(guò)路由懶加載，只有在使用到對(duì)應(yīng)的頁(yè)面時(shí)才會(huì)加載相關(guān)的代碼。這樣可以減少初始加載的代碼量，提升網(wǎng)頁(yè)的加載速度，特別是在應(yīng)用有很多頁(yè)面的情況下效果更為明顯。
2. 提升頁(yè)面加載速度： 當(dāng)用戶訪問(wèn)某個(gè)具體的頁(yè)面時(shí)，只需要加載該頁(yè)面所需的代碼，而不是一次性加載所有頁(yè)面的代碼。這樣可以減少請(qǐng)求的網(wǎng)絡(luò)帶寬和內(nèi)存占用，提升頁(yè)面加載速度，給用戶更好的體驗(yàn)。
3. 優(yōu)化資源利用： 路由懶加載可以將應(yīng)用劃分為多個(gè)獨(dú)立的模塊，每個(gè)模塊可以按需加載，提高代碼的復(fù)用性和可維護(hù)性。同時(shí)，由于只加載當(dāng)前需要的模塊，可以更好地控制資源的使用，避免一次性加載過(guò)多的資源。

簡(jiǎn)單來(lái)說(shuō)： 路由懶加載可以讓網(wǎng)站加載更快，提高用戶體驗(yàn)，同時(shí)也更好地利用資源、提高代碼可維護(hù)性。

使用懶加載
使用懶加載可以優(yōu)化同一時(shí)間減少 http 請(qǐng)求開銷。
比如頁(yè)面加載時(shí)讓他先加載部分?jǐn)?shù)據(jù)，等用戶點(diǎn)擊下一頁(yè)或下拉之后再加載另一部分?jǐn)?shù)據(jù)

六、引入網(wǎng)絡(luò)資源

可以將靜態(tài)資源放在第三方 CDN 服務(wù)器上，比如 css、js、圖片、視頻、字體等

這樣做有以下好處：

1. 提高頁(yè)面加載速度
2. 減少項(xiàng)目打包之后的體積
3. 利用瀏覽器緩存，不變動(dòng)的文件長(zhǎng)期緩存

七、盡可能使用按需導(dǎo)入

在項(xiàng)目中盡可能避免 * 導(dǎo)入全部而是使用按需導(dǎo)入，否則就會(huì)導(dǎo)入很多我們用不到的東西從而影響項(xiàng)目打包的體積大小以及頁(yè)面加載速度。

八、icon 使用精靈圖

默認(rèn)情況下頁(yè)面中有幾張圖片就會(huì)發(fā)起幾次請(qǐng)求，所以我們可以將圖片全部合成在一張圖中，然后通過(guò)操作 CSS 的 background 屬性，控制背景的位置以及大小，來(lái)展示需要的部分。這樣可以減少 HTTP 請(qǐng)求壓力

九、銷毀資源

使用完某些代碼后一定要銷毀資源，比如定時(shí)器。一般在 beforeDestroy 中銷毀。這樣可以避免資源浪費(fèi)以及內(nèi)存泄露

十、使用節(jié)流防抖

節(jié)流：在一定時(shí)間間隔內(nèi)只執(zhí)行一次函數(shù)

function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

防抖：在一定時(shí)間內(nèi)不能被再次觸發(fā)

function debounce(func, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

使用

function onScroll() {
  console.log("Scroll event");
}

// 使用節(jié)流函數(shù)
const throttledScroll = throttle(onScroll, 200);
window.addEventListener("scroll", throttledScroll);

// 使用防抖函數(shù)
const debouncedScroll = debounce(onScroll, 200);
window.addEventListener("scroll", debouncedScroll);

這兩種技術(shù)可以在事件處理、滾動(dòng)加載、搜索框輸入等場(chǎng)景下有效地減少不必要的計(jì)算和操作，提升頁(yè)面性能和用戶體驗(yàn)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-856926.html

到了這里，關(guān)于最全 Vue 性能優(yōu)化方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！