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

时间:2018-10-10 15:29:07

标签: vue.js vuejs2 vue-component vuex

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

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

我想知道是否有某种方法可以可视化或看到无限循环的想法陷入困境?我一直在尝试探索__ob__之类的东西,但是depssubs太多了,我不知道问题出在哪里或{{ 1}}和deps。我仍然无法理解每次发生无限循环的确切含义。有没有办法告诉Vue进入无限循环,以便我可以看到堆栈跟踪或可以使用的其他调试方法?

1 个答案:

答案 0 :(得分:0)

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

 var arrayToChildComponent = arrayData.slice();