如何确定导致组件重新呈现的原因

我遇到一个问题，当我更改应用程序中的组件时，许多不相关的组件似乎也会重新呈现。当我使用Vue Performance Timmings配置时，我看到如下内容(全部在大约200ms的跨度内)

我正在尝试找出导致这些组件重新呈现的原因。我看到了关于如何判断重现原因的tip，但当我将此代码段*放入所有重现组件中时，我没有得到任何记录到控制台的内容。

那么，我如何才能找到导致所有这些组件重新呈现的原因？

*我实际放入的代码如下

public mounted() {
    let oldData = JSON.parse(JSON.stringify(this.$data));
    this.$watch(() => this.$data, (newData) => {
      console.log(diff(oldData, newData));
      oldData = JSON.parse(JSON.stringify(newData));
    }, {
      deep: true,
    });
  }

---

解决方案

使用Chrome中的F12开发工具，您可以跟踪触发组件重新呈现的原因。将更新的挂钩添加到组件，如下所示：

updated() {

            if (!this.updateCnt)
                this.updateCnt = 1;
           
            if (this.updateCnt > 1) { // set to desired
                debugger;
            }
            console.log(`Updated ${this.updateCnt++} times`);
        }
    }

在打开F12工具的情况下在Chrome中刷新页面，并等待命中断点。在Sources选项卡中，您将在右侧看到调用堆栈，并将更新()函数作为当前堆栈帧。回顾调用堆栈，最终您应该会看到导致更新触发的代码。在我的例子中，它是VUE运行时中的reactive veSetter()，它是由我在父组件中设置属性触发的。

上面的代码仅在组件自身的状态更改时才会触发，而不是父级。