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函数，然后就开启了无限循环。

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

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