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

Question

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

Answer 1

使用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>