在 Vue.js 中，当某些数据发生变化时，组件会重新渲染（更新）。有时重新渲染频率太频繁，我想找出哪些数据的更改导致了此重新渲染。如何找出导致重新渲染的更改数据？
Using 深度差异和一个简单的观察程序，您可以轻松找到虚拟机数据的先前副本之间的差异。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
