背景工作中时不时就会遇到这种情况:页面上显示的数据不对,需要前端同事进行定位。遇到复杂的数据流,没有合适的方法,排查起来会很头疼。顺着调用栈给出的线索找下去,就能够快速定位到问题。例子误区 - 在 Watch 里打断点查看调用栈我们可以在页面右边的 Call Stack 看到 f1 和 msg 的回调,但是看不到 f2 和 f3。也就是说 f2, f3 丢失了,但实际上正是 f2 导致数据发生了错误。因为 f1, f2, f3 都修改了 msg,在同一个微任务里触发了 msg 的 Watcher,因为 f1 最先触发,所以f2,f3 的触发无效。总结通过查看调用栈的方式,不需要对项目有多熟悉,就能够快速定位到数据发生错误的地方。

Vue 如何追踪数据变化

Vue 如何追踪数据变化

Vue 如何追踪数据变化