vue 多级嵌套数组渲染性能优化
最近遇见一个问题,移动端一个页面展示折叠展示数据,具体要展示多个区域,每个区域下面有不同业务人员,每个业务人员有自己的客户,每个客户又有不同的记录,即这个页面要渲染一个4层的数组。具体页面展示类似为:
1-区域数据
2-区域下属业务员及其客户数据
拿到页面的时候,我想这不简单的么,不就是列表么,四层循环走起。页面先遍历区域进行渲染,然后再遍历区域内的业务员,再遍历业务员的客户,再遍历客户的记录,因为每层展开必须要一个字段进行记录,然后我就把获取的数据按照这四层遍历,每层加个isChecked进行记录展开状态。开始时本地数据比较少还ok,然后导入公司现有的业务员数据以后,哦豁!彻底卡死了,特别是页面还有相关的字段进行模糊查询,整个页面就是卡帧版的贞子,看着吓人呀!
那怎么办呢,男人总不能说自己不成吧。于是开始审视自己的代码,然后找原因:
1、请求接口比较慢,http请求时间都超过3s了,然后监控了一下看了,后台返回的数据太大了,接近800k,这就不太美妙了,于是后台给力地找无用字段,类似于creatdate全删掉,一下子数据就降到300k。
2、前端拿到数据按照四层遍历,每层加个isChecked进行记录展开状态,耗时太多,怎么搞,交给后台大神在嵌套的对象中添加相关字段。
然后再次测试,页面是要快了一些,但是在一些低端一点的手机,还是比较卡,得,再去找原因,一看,就是列表渲染时间太长了,怎么办,加个菊花!于是在列表数据改变时,开启菊花瓣,利用this.$nextTick渲染完成时候关闭,然后项目经理就不干了,一样的慢,不一样的菊花,要这菊花有何用!按照道理,vue使用的虚拟dom,渲染数组应该很快的。但是页面慢,就是嵌套渲染效率低,没有别的办法,只能去解决四层嵌套的渲染问题了。
1、我首先想到的是拆接口,类似于点击区域的时候,接口获取区域下的业务员,然后点击业务员,再接口获取业务员下的数据,依次类推,但是渲染的节点太多,一个个去获取,请求http,应该也快不了。
2、后台所有嵌套的数据都有,直接把这个数据处理,开始的时候只有区域的数据,点击某个区域就把下面的业务员数据push进去,然后再更新数组;点击事件用事件代理来处理,这下来点击事件相对来说也少了很多。想了想,准备撸起袖子加油干了!然后一看自己多级嵌套的代码,瞬间就没得欲望了。那只能偷懒再想办法了!
3、前端渲染慢,就是因为一次渲染所有层的数据,除了点击处理数据,有没有什么方法呢?我突然想起,v-if和v-show的区别,当初始化的时候,通过v-if来阻止下层的数据渲染,然后点击的时候改变状态,渲染下级数据,岂不美哉!于是,请求后台大神在每层数据的加入rendered字段,如同isChecked一样,初始化时为false,点击时变为true,再利用v-if加载dom。宾狗,完美!一部分逻辑代码如下:
3-利用v-if渲染下级数组
总结:原理还是很重要的,只有懂得原理,才能更好更快的找出问题所在,解决问题。思路也很重要,遇到问题多想一下,多尝试。共勉!
以上是 vue 多级嵌套数组渲染性能优化 的全部内容, 来源链接: utcz.com/z/375281.html