使用deep-diff和一个简单的监视器，您可以很容易地找到与以前的vm数据副本之间的差异。

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>

除了上面提到的，正如评论中提到的，深度观察器只有在组件自身的数据发生变化时才能工作。下面显示了一个更有说服力的方法（也发布到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选项卡中，您将在右侧看到调用堆栈，其中包含更新的（）函数作为当前堆栈帧。返回调用堆栈，最终您应该看到导致触发更新的代码。在我的示例中，它是reactiveSetter（），这是由我在父组件中设置属性触发的。

Vue 3和Vue 2.7本机支持此功能

export default {
  renderTracked(event) {
    debugger
  },
  renderTriggered(event) {
    debugger
  }
}

see https://vuejs.org/guide/extras/reactivity-in-depth.html#component-debugging-hooks