w萬條接口數據下 如何優化vue 接值 及賦值

正題 如果你請求一個接口  接口返回數據爲10000條  那麼  如何 將這1w條數據賦值給vue變量呢

如果你測試過 你會發現 一個  裝有2000個json對象的數組  賦值給vue的data屬性時   屏幕會出現卡頓

出現卡頓的原理也是因爲 vue 會對賦值對象 動態添加set get方法 這也是vue 雙向綁定的原理   

那麼我們如何優化這個問題呢

這裏引入個知識點

vue2版本   有2個方式修改數組是不會被vue監聽到的

    a 通過數組索引修改內容的時候 vue是無法監聽數組變化的 
    b 通過改變數組長度的方法     vue是無法監聽數組變化的

利用以上2點 我們可以在不被vue監聽的情況下  接受後臺的 1w條數據 然後 不渲染頁面 僅僅當作儲存使用


 data(){
    return {
      list1:[], //聲明數組list1
    }
  },


freezeList1(){  // 綁定一個點擊事件

  // l 爲模擬的1w條數據
  const l = [{name:'a'},{name:'b'},{name:'c'},{name:'d'},{name:'e'},{name:'f'}]
 
  this.list1.length = l.length  // 修改數組長度 爲for循環準備  這裏vue是不會被監聽的

  for(let i =0;i<l.length;i++){
     this.list1[i]=l[i] // 索引賦值 這裏vue也是不會監聽的
  }
  console.info(this.list1)
},


通過上面的代碼 我們可以看到 list1 在頁面渲染出來的 是個空數組 當我們執行 freezeList1方法後
list1 已經變成了1w條數據 但是我們的頁面渲染的還是空數組
然後我們可以利用窗口可視化 或者頁面滾動等方法 分批次的 從list1裏取出值  賦值給 list2
這裏給list2賦值 用 直接賦值 或者 set的方法 總之是使用可以被vue監聽的方式   這樣就緩解了1w條數據 同時賦值給vue變量的問題

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章