el-table的死循环问题调查

今天是头昏脑胀的一天,光调一个el-table的渲染死循环就用了将近两个小时,然后找深层原因又用了两个多小时,真是欲哭无泪。

这里记录一下,希望能帮助后来人。

话说我现在做的是一个数据可视化系统,说的通俗易懂点就是报表系统,通过拖拽的形式快速的创建一个个报表,包括市面上见的图表,什么折线图 柱状图 饼图 漏斗图 还有业务相关的复合型图表,在此之前我从来没想过表格才是这么多图表中最难的,我手下的一个小伙伴从入职一直负责做表格,然后做到离职,哎

言归正传,今天的主角还是这个表格,有用户反映某些报表打开后页面卡死,不能操作。不用想了,一定是死循环了呗,一点一点的排除,最后发现是表格的问题。表格用的是el-table,然后在其上进行疯狂的改写封装,支持无限表头的设置,支持条件样式,支持。。。我的天我怎么说个没完了,真是恨透了表格,又跑题了,哈哈。

控制台显示el-table的render中无限循环,真是太难了,这段代码是一个递归调用来渲染层级表头的,代码review了不知道多少次,根本不可能形成无限递归呀,最后只能使出超级杀手锏了,删掉代码,一点一点试验。

好吧,皇天不负苦心人,终于找到原因了,是因为v-for循环中的key有NaN的情况,这是因为小伙伴用了item.code+index来生成key,在某些情况下,code竟然是undefine,结果就是NaN,我们想办法修复了数据。然后我把小伙伴打发走了。我很好奇,为什么NaN就会导致死循环呢。

我开始了痛苦的调试element代码之路。在此之前我用简单的div做实验,没有这个问题,所以我猜想是element某些东西导致的。

调试的过程我不想再回忆了,各种加debugger console.log,折腾到七点左右。最终得出结论,但是还有一些未解之谜,超出了我的知识范围。

el-table在渲染时会调用两次render函数。每次调用都会触发insertColumn,这个函数会修改列相关的信息,又导致table的render的执行,就这样死循环下去了。那,有的看客要说了,要是有这个问题el-table不早就爆出来了。我这里要说的是它执行了两次render。这个本身也不会有任何问题,因为第二次调用时,el-table-column不会重新创建,因此不会再更新列信息,不会再出发新一次的render的执行,这个涉及到虚拟dom的复用,复用的依据是key相同。可怜的是我这里的key是NaN,这个玩意是jr中唯一一个自己不等于自己的东西,然后可想而知了虚拟dom不会服用,第二次执行render还是会创建新的el-table-colunn对象,然后执行insertColumn函数,然后就开启了无限循环。

好了,我自认为是把事情说明白了,希望有缘人能看懂,哈哈,手机打字不容易啊!

如果不幸帮助到你,请点赞,嘻嘻

你可能感兴趣的:(笔记)