vue报错RangeError: Maximum call stack size exceeded

1.背景

在半年前写了一个列表的页面，做好了给客户一直在用，这个列表的数据量增加较多，每天大概会新增2万条左右。直到最近客户反应说代码列表查询不了。这个问题很奇怪，360浏览器没有报错，谷歌浏览器却一直报错：RangeError: Maximum call stack size exceeded。发现列表数据量总条数有200多万条，每页10显示，总页数20多万条。由于问题现象很奇怪，浏览器现象各不相同，百度也找不到解决办法，百度大部分都说是大量的递归调用导致，但是发现代码比较简单，根本没有递归调用的方法。该问题必须要解决，这是客户比较常用的功能模块。于是一行一行注释代码和报错信息进行排查发现问题所在。

2.发现问题类似代码

发现只要注释这两行给列表赋值的代码就不再报错。其实真正的问题不在这里。我之所以发现问题所在。之前没有经验，排查了很久，第二天才忽然发现有个地方for循环空循环了20多万次，导致出现问题。循环20多万次的根本原因是数据量增加，页数也增加导致。

3.解决办法

（1）后端控制最多显示1000页

（2）前端优化for循环的代码，减少for循环次数1000次，还可以更多，但是建议不要太多。

总结：出现堆栈溢出的情况，无非还是自己的代码有问题。这时需要检查代码是否重复调用。比如递归次数太多一直没有退出。还有就是for循环次数太多导致，注意空循环也会导致，只要for中有if判断代码。

最后问题完美解决。