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变量的问题