In Vue.js, How to find what data changes cause a component to re-render?

问题

In Vue.js, a component does re-render(update) when some data changes. Sometimes the re-render frequency is too often and i want to find out which data's change cause this re-render. How to find out the changed data causing the re-render?

回答1:

Using deep-diff and a simple watcher, you can easily find the difference between a previous copy of your vm data.

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/questions/50579835/in-vue-js-how-to-find-what-data-changes-cause-a-component-to-re-render