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



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

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

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

你能在浏览器上提供完整的错误消息吗?根据我的经验,在将模型放在子组件上之前,您可能需要复制数据。与数组一样,您可能希望拥有:

var arrayToChildComponent = arrayData.slice();

最新更新