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渲染下级数组

    总结：原理还是很重要的，只有懂得原理，才能更好更快的找出问题所在，解决问题。思路也很重要，遇到问题多想一下，多尝试。共勉！