vue中如何實(shí)現(xiàn)長列表性能優(yōu)化

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

長列表性能優(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
  }
   ...
}

可以看到一開始就判斷 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ù)很長的列表，全部渲染的話一次性創(chuàng)建太多 DOM 就會(huì)非常卡，這時(shí)就可以用虛擬滾動(dòng)，只渲染少部分(含可視區(qū)域)區(qū)域的內(nèi)容，然后滾動(dòng)的時(shí)候，不斷替換可視區(qū)域的內(nèi)容，模擬出滾動(dòng)的效果

<recycle-scroller
 class="items"
 :items="items"
 :item-size="24"
>
 <template v-slot="{ item }">
   <FetchItemView
     :item="item"
     @vote="voteItem(item)"
   />
 </template>
</recycle-scroller>

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

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