在 Vue.js 中，如何查找哪些数据更改导致组件重新渲染？答案

【问题标题】：In Vue.js, How to find what data changes cause a component to re-render?在 Vue.js 中，如何查找哪些数据更改导致组件重新渲染？
【发布时间】：2018-05-29 08:36:11
【问题描述】：

在 Vue.js 中，当某些数据发生变化时，组件会重新渲染（更新）。有时重新渲染频率太频繁，我想找出哪些数据的变化导致重新渲染。如何找出导致重新渲染的更改数据？

【问题讨论】：

你见过updated:vuejs.org/v2/api/#updated
@vahdet 是的，但是在 update 我们无法找出哪些数据发生了变化
是的，对不起；然后，我可能会建议将watchers 单独添加到您的数据中，并执行简单的时间戳日志记录 - 假设数据更改将触发重新渲染。

标签： vue.js vuejs2

【解决方案1】：

除此之外，正如 cmets 中所指出的，深度观察器仅在组件自身的数据发生更改时才起作用。比较有说服力的方法如下图（也发到https://stackoverflow.com/a/69275418/960380）

使用 Chrome 中的 F12 开发工具，您可以追踪触发组件重新渲染的原因。向您的组件添加更新的钩子，如下所示：

updated() {

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

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

【讨论】：

【解决方案2】：

使用deep-diff 和一个简单的观察器，您可以轻松找到之前的虚拟机数据副本之间的差异。

new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  mounted() {
    let oldData = JSON.parse(JSON.stringify(this.$data));
    this.$watch(vm => vm.$data, (newData) => {
      console.log(DeepDiff.diff(oldData, newData));
      oldData = JSON.parse(JSON.stringify(newData));
    }, {
      deep: true
    });
  },
  methods: {
    add: function() {
      this.counter++;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/deep-diff@1/dist/deep-diff.min.js"></script>
<div id="app">
  <button @click="add"> +1 </button> {{ counter }}
</div>

【讨论】：

谢谢，确实是一个简单的方法。我想知道 vue.js 是否提供了一些方法来做到这一点。我试试你的方法
我试过这样做，但它似乎不起作用。运行 Vue 的性能模式，我看到这个特定的组件重新渲染了很多很多次。但我没有从控制台得到任何东西
@MaxCoplan 也许你的代码有一些特定的东西。您可能应该使用一些示例打开一个新问题。
@Cobaltway 很遗憾我无法分享此代码，但我会发布一个新问题
@Cobaltway 如果您能提供帮助，我将不胜感激stackoverflow.com/questions/64876458/…