场景：一个list列表的渲染
如图
之前采取的是一把梭的形式，全部由一个接口去获取所有的数据，由于后台搭建数据库的设计，到后期由于数据量比较庞大，后台查询的时候就会超时，然后我这边就GG了。
优化：后台通过接口A只返回给我每个list元素的id，然后通过id去调用另外一个接口B去渲染剩下的数据。
第一次尝试：由于项目是用vue写的，渲染的时候用的v-for，而且考虑到后台做了分页，我这边直接把A接口返回的数组arr拿去渲染了，当然最开始最有一个id，通过遍历arr拿到ID异步请求接口B获取的其他数据直接通过obj.xxx = xxx的形式填充arr,发现页面没有渲染完成，查完资料才发现并没有检测到数组的更新，所以页面不会重新渲染。
第二次尝试：主要就是解决检测数组更新的方法，哎呀 我太懒了不想写了点击这里
主要就是非变异方法的检测，溜了溜了
example1.items.splice(indexOfItem, 1, newValue)就搞定了
网友评论