在 Vue.js 中，如何查找哪些数据更改导致组件重新渲染? [英] In Vue.js, How to find what data changes cause a component to re-render?

问题描述

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

解决方案

使用 deep-diff 和一个简单的观察者，你可以很容易地发现你的 vm 数据的先前副本之间的区别.

new Vue({el: "#app",数据: {计数器:0},安装(){让 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));}, {深:真实});},方法: {添加:函数(){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="应用程序"><按钮@click="添加">+1{{ 柜台 }}

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?

解决方案

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>

这篇关于在 Vue.js 中，如何查找哪些数据更改导致组件重新渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！