正题 如果你请求一个接口 接口返回数据为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变量的问题