vue3控制台警告问题?

Question

为什么控制台会疯狂打印,抛出这个警告?

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)

Answer 1

一般来说带有 Maximum 这样的问题都是自己业务代码的问题。
要么就是短时间内更新了多次，要么就是业务代码有问题出现死循环了。

Answer 2

首先我把这个提示大致翻译下（英语不是很好，请见谅）：
某个组件中超过了最大递归更新。这意味着你有一个效果正在起反应，但是它正在改变自己的依赖关系，从而自己也触发了。

从我别扭的翻译中其实可以大致猜到，这个叫做<ElFormItem>的组件的响应式变量被自身依赖，同时又被其它变量所依赖，出现无限死循环更新导致控制台疯狂打印的情况。

要避免这种情况，需要尽量减少响应式变量之间的相互依赖关系，确保一个变量不会依赖于自身或者间接依赖于自身。对于组件内部的响应式变量，可以使用computed属性来控制它的行为，这样可以依赖其他变量计算得到，不会自身递归循环。

Answer 3

for (let index = 0; index < newVal.length; index++) {
    setGoodsAttr(newVal[index])
  }

问题在于你深度监听了printInfoList.value, 并且在监听回调中直接修改了你要监听的值.从console来看, printInfoList的length 为101, 即你每改动一项, 上一个for循环可能还未结束又因为改动触发监听开启了下一个for循环.
解决办法的话, 从方法名推测,设置商品属性.监听数组变动自动添加.把设置值这个过程从监听里移除,放进你会导致数组长度变动的操作逻辑里面就好了.