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

Question

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

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

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

标签： vue.jsvuejs2vue-componentvuex

Answer 1

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

 var arrayToChildComponent = arrayData.slice();