为什么控制台会疯狂打印,抛出这个警告?
Maximum recursive updates exceeded in component <ElFormItem>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function
watch(printInfoList.value, (newVal) => {
isComplete = true
newAttr = ''
for (let index = 0; index < newVal.length; index++) {
setGoodsAttr(newVal[index])
}
// 好像是因为这段代码
emits("update:attrInfo", {
goodsAttr,
isComplete,
oldAttr,
newAttr
});
}, true)
一般来说带有 Maximum
这样的问题都是自己业务代码的问题。
要么就是短时间内更新了多次,要么就是业务代码有问题出现死循环了。
首先我把这个提示大致翻译下(英语不是很好,请见谅):
某个组件中超过了最大递归更新。这意味着你有一个效果正在起反应,但是它正在改变自己的依赖关系,从而自己也触发了。
从我别扭的翻译中其实可以大致猜到,这个叫做<ElFormItem>的组件的响应式变量被自身依赖,同时又被其它变量所依赖,出现无限死循环更新导致控制台疯狂打印的情况。
要避免这种情况,需要尽量减少响应式变量之间的相互依赖关系,确保一个变量不会依赖于自身或者间接依赖于自身。对于组件内部的响应式变量,可以使用computed属性来控制它的行为,这样可以依赖其他变量计算得到,不会自身递归循环。