Laravel 8.x未触发超时问题排查：前端无限循环致页面卡顿

刚碰到的这个问题真的挺棘手的——页面卡到完全无响应，连个报错都不给，还好你通过注释代码找到了问题根源！

先复盘下你的场景：用Laravel 8.x+Vue+Vuetify做CRUD，展示的还是只有11个对象的小数组，之前一切正常，改了点代码后npm run watch编译完，页面直接卡了90分钟，重启电脑都没用。之前偶尔有超时，但刷新就好，这次直接崩了。

按照你更新的排查结果，问题出在deleteRow方法里的for循环：

for (let todo of this.todos) {
    if (todo.id == deleteID) index = todo.index;
}

这里的deleteID没加this前缀！导致代码里引用的是一个未定义的变量，而不是组件实例里的this.deleteID。

为什么这会导致页面无响应？ #

因为deleteID未定义，所以todo.id == deleteID这个条件永远不成立（你的todo对象都有合法的id值），index一直保持初始的-1。接下来调用todos.splice(index, 1)时，splice(-1,1)虽然会删除数组最后一个元素，但更关键的是，这种逻辑错误触发了Vue响应式系统里的异常更新链——但不管是浏览器控制台、npm run watch终端还是Laravel的日志，都没抛出明确的报错，属于典型的“静默失败”导致的页面卡死。

几个可以避免这类坑的小建议： #

• 组件方法里访问实例属性一定要加this：别偷懒，尤其是循环、条件判断这类逻辑里，漏掉this很容易引发这类隐形错误
• 替换低效的循环查找：用Vue推荐的数组方法简化索引查找，比如：

  const index = this.todos.findIndex(todo => todo.id === this.deleteID);
  

  不仅代码更简洁，还能避免手动循环的低级错误
• 开启Vue开发工具辅助排查：平时开发打开Vue Devtools，能实时查看组件的状态变化，一旦出现异常的重复更新，能快速定位到问题代码
• 遇到无响应先查最近修改的循环/递归：这类代码最容易出现无限循环或者死逻辑，而且很多时候不会抛出明显报错

内容的提问来源于stack exchange，提问作者Henry