這篇文章主要介紹vue中如何實(shí)現(xiàn)長(zhǎng)列表性能優(yōu)化，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了廣安免費(fèi)建站歡迎大家使用！

長(zhǎng)列表性能優(yōu)化

1. 不做響應(yīng)式

比如會(huì)員列表、商品列表之類的，只是純粹的數(shù)據(jù)展示，不會(huì)有任何動(dòng)態(tài)改變的場(chǎng)景下，就不需要對(duì)數(shù)據(jù)做響應(yīng)化處理，可以大大提升渲染速度

比如使用 Object.freeze() 凍結(jié)一個(gè)對(duì)象，MDN的描述是 該方法凍結(jié)的對(duì)象不能被修改；即不能向這個(gè)對(duì)象添加新屬性，不能刪除已有屬性，不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值，以及該對(duì)象的原型也不能被修改

export default {
 data: () => ({
   userList: []
}),
 async created() {
   const users = await axios.get("/api/users");
   this.userList = Object.freeze(users);
}
};

Vue2 的響應(yīng)式源碼地址：src/core/observer/index.js - 144行 是這樣的

export function defineReactive (...){
   const property = Object.getOwnPropertyDescriptor(obj, key)
   if (property && property.configurable === false) {
       return
  }
   ...
}

可以看到一開(kāi)始就判斷 configurable 為 false 的直接返回不做響應(yīng)式處理

configurable 為 false 表示這個(gè)屬性是不能被修改的，而凍結(jié)的對(duì)象的 configurable 就是為 false

Vue3 里則是添加了響應(yīng)式flag，用于標(biāo)記目標(biāo)對(duì)象類型

2. 虛擬滾動(dòng)

如果是大數(shù)據(jù)很長(zhǎng)的列表，全部渲染的話一次性創(chuàng)建太多 DOM 就會(huì)非?？?，這時(shí)就可以用虛擬滾動(dòng)，只渲染少部分(含可視區(qū)域)區(qū)域的內(nèi)容，然后滾動(dòng)的時(shí)候，不斷替換可視區(qū)域的內(nèi)容，模擬出滾動(dòng)的效果

原理是監(jiān)聽(tīng)滾動(dòng)事件，動(dòng)態(tài)更新需要顯示的 DOM，并計(jì)算出在視圖中的位移，這也意味著在滾動(dòng)過(guò)程需要實(shí)時(shí)計(jì)算，有一定成本，所以如果數(shù)據(jù)量不是很大的情況下，用普通的滾動(dòng)就行

以上是“vue中如何實(shí)現(xiàn)長(zhǎng)列表性能優(yōu)化”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！