如何可视化vue无限更新循环的无限循环

Posted 2023-02-22

【中文标题】如何可视化vue无限更新循环的无限循环

【英文标题】：How to visualize infinite loop for vue infinite update loop

【发布时间】：2019-03-15 13:46:49

【问题描述】：

我们有一个相当复杂/嵌套的系统，在嵌套的 Vue 组件中使用了很多 Vuex。我经常遇到警告，[Vue warn]: You may have an infinite update loop in a component render function. 这些无限循环并不那么容易找到，并且花了我很长时间来调试。

我查看了 Vue 警告堆栈跟踪并查看了在我的代码中调用的最后一个函数，但这对我来说根本不明显为什么存在无限循环或存在于何处。我假设在这些难以调试的情况下，由于我的子组件的更改，某些父组件想要重新渲染，因此子组件再次运行相同的 vuex 函数，导致父组件重新渲染等，但我永远无法追踪以确认或查看究竟是哪个函数导致父组件的哪个部分或自身重新渲染。

我想知道是否有某种方法可以可视化或看到 vue 陷入了无限循环？我一直在尝试探索__ob__ 等，但是deps 和subs 太多了，我不明白问题出在哪里，或者在deps 和subs 中真正要寻找什么。我仍然无法理解每次发生的无限循环具体是什么。有没有办法告诉 Vue 进入无限循环，以便我可以看到堆栈跟踪或其他一些我可以使用的调试方法？

【参考方案1】：

您能否在浏览器上提供完整的错误消息？根据我的经验，您可能需要在将模型放在子组件上之前复制数据。像数组一样，你可能想要：

 var arrayToChildComponent = arrayData.slice();