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