vue中如何實現長列表性能優化

這篇文章主要介紹vue中如何實現長列表性能優化，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

長列表性能優化

1. 不做響應式

比如會員列表、商品列表之類的，只是純粹的數據展示，不會有任何動態改變的場景下，就不需要對數據做響應化處理，可以大大提升渲染速度

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

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

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

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

可以看到一開始就判斷 configurable 為 false 的直接返回不做響應式處理

configurable 為 false 表示這個屬性是不能被修改的，而凍結的對象的 configurable 就是為 false

Vue3 里則是添加了響應式flag，用于標記目標對象類型

2. 虛擬滾動

如果是大數據很長的列表，全部渲染的話一次性創建太多 DOM 就會非常卡，這時就可以用虛擬滾動，只渲染少部分(含可視區域)區域的內容，然后滾動的時候，不斷替換可視區域的內容，模擬出滾動的效果

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

原理是監聽滾動事件，動態更新需要顯示的 DOM，并計算出在視圖中的位移，這也意味著在滾動過程需要實時計算，有一定成本，所以如果數據量不是很大的情況下，用普通的滾動就行

以上是“vue中如何實現長列表性能優化”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！