在Vue.js中,当一些数据发生变化时,组件确实会重新呈现(更新),有时候重新呈现的频率太高,我想找出是哪些数据的变化导致了这种重新呈现,如何找出是哪些变化的数据导致了这种重新呈现?
juzqafwq1#
使用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>
wmvff8tz2#
除了上面提到的,正如评论中提到的,深度观察器只有在组件自身的数据发生变化时才能工作。下面显示了一个更有说服力的方法(也发布到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(),这是由我在父组件中设置属性触发的。
gg58donl3#
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
3条答案
按热度按时间juzqafwq1#
使用deep-diff和一个简单的监视器,您可以很容易地找到与以前的vm数据副本之间的差异。
wmvff8tz2#
除了上面提到的,正如评论中提到的,深度观察器只有在组件自身的数据发生变化时才能工作。下面显示了一个更有说服力的方法(也发布到https://stackoverflow.com/a/69275418/960380)
使用Chrome中的F12开发工具,你可以追踪到是什么触发了你的组件重新呈现。给你的组件添加一个更新的钩子,如下所示:
在Chrome中打开F12工具并刷新页面,等待断点被点击。在Sources选项卡中,您将在右侧看到调用堆栈,其中包含更新的()函数作为当前堆栈帧。返回调用堆栈,最终您应该看到导致触发更新的代码。在我的示例中,它是reactiveSetter(),这是由我在父组件中设置属性触发的。
gg58donl3#
Vue 3和Vue 2.7本机支持此功能
see https://vuejs.org/guide/extras/reactivity-in-depth.html#component-debugging-hooks