正題 如果你請求一個接口 接口返回數據爲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變量的問題