vue3控制台警告问题?

2023-06-27 348 0

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

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属性来控制它的行为,这样可以依赖其他变量计算得到,不会自身递归循环。

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?