vue.js - 如何确定导致组件重新渲染的原因

Question

我遇到一个问题，当我更改我的应用程序中的组件时，许多不相关的组件似乎也在重新呈现。当我使用 Vue 性能计时配置时，我看到类似的东西(都在大约 200 毫秒的范围内)

我正在尝试找出导致这些组件重新呈现的原因。我看到一个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,
    });
  }

Answer 1

使用 Chrome 中的 F12 开发工具，您可以追踪是什么触发了您的组件重新呈现。向您的组件添加更新的 Hook ，如下所示:

updated() {

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

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

上面的代码只会在组件自身的状态发生变化时触发，而不是父组件。