Vue 如何追踪数据变化
背景
工作中时不时就会遇到这种情况：页面上显示的数据不对，需要前端同事进行定位。
在一个使用 Vue 搭建的 SPA 应用上，页面最终展示的数据，从初始化，到最后的展示，过程可能很简单，也可能很复杂。遇到复杂的数据流，没有合适的方法，排查起来会很头疼。
如果能够看到数据发生变化时的调用栈，就可以知道在错误的数据生成前，发生了什么，是哪一步的错误，导致了最终的错误。顺着调用栈给出的线索找下去，就能够快速定位到问题。
例子
<template>
<div>
<!-- 预期输出：hello,world -->
<!-- 实际输出：hello,woold -->
{{ msg }}
<button @click="f1">change msg</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'hello,',
}
},
methods: {
f1() {
this.msg += 'w'
this.f2();
},
f2() {
this.msg += 'oo';
this.f3();
},
f3() {
this.msg += 'ld'
}
}
};
</script>
误区 - 在 Watch 里打断点查看调用栈
我们可以在页面右边的 Call Stack 看到 f1 和 msg 的回调，但是看不到 f2 和 f3。也就是说 f2, f3 丢失了，但实际上正是 f2 导致数据发生了错误。
为什么 f2，f3 的调用信息会丢失？
因为 f1, f2, f3 都修改了 msg，在同一个微任务里触发了 msg 的 Watcher，因为 f1 最先触发，所以f2，f3 的触发无效。最终 Watcher 回调运行的时候，只记得是 f1 触发它的，所以此时的 Call Stack 只能看到 f1 的信息。
正确的做法
进入到 node_modules\vue\dist\vue.runtime.esm.js，在 defineReactive 函数的 set 方法里添加断点，这里的 key 就是要监听的变量的名字。
在这里，就能够看到 msg 发生变化的完整过程，快速定位到是 f2 导致的问题。
总结
通过查看调用栈的方式，不需要对项目有多熟悉，就能够快速定位到数据发生错误的地方。相比于用 console.log 或者花很多时间去理清代码逻辑，数据流的方式，可以减少很多的工作量。
以上就是Vue 如何追踪数据变化的详细内容，更多关于Vue 追踪数据变化的资料请关注脚本之家其它相关文章！
相关文章
vue cli3.0结合echarts3.0与地图的使用方法示例
这篇文章主要给大家介绍了关于vue cli3.0结合echarts3.0与地图的使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章手把手教你搭建vue3.0项目架构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-11-11
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。这篇文章主要介绍了vue.js绑定style和class的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了Vue FileManagerPlugin 报错问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue proxytable代理根路径的同时增加其他代理方式
这篇文章主要介绍了vue proxytable代理根路径的同时增加其他代理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue中的项目打包及部署全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
el-table表头根据内容自适应完美解决表头错位和固定列错位
这篇文章主要介绍了el-table表头根据内容自适应完美解决表头错位和固定列错位,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
文章讨论了在使用Vue.js时,通过动态class修改元素样式时可能会遇到的问题,当通过JavaScript动态添加类时,Vue的动态class会覆盖掉通过JavaScript添加的类,导致样式丢失,这个问题在实际开发中可能会遇到,尤其是在使用第三方框架2024-12-12
去年全景图在微博上很是火爆了一阵,正好我也做过一点全景相关的项目,下面这篇文章主要给大家介绍了关于three.js实现vr全景图功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
文章介绍了如何在Vue 3项目中使用Pinia进行状态管理,主要内容包括安装Pinia、初始化、在main.ts中注册和使用,以及在.vue的setup中使用state,文章还提到getters和actions的使用可以参考官方文档,总结部分表达了作者希望得到大家支持的意愿2025-01-01
最新评论