Vue 如何追踪数据变化
2021-04-15 04:06
766 查看
背景
工作中时不时就会遇到这种情况:页面上显示的数据不对,需要前端同事进行定位。
在一个使用 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 追踪数据变化的资料请关注脚本之家其它相关文章!
您可能感兴趣的文章:相关文章推荐
- 如何利用Python将疫情数据制作成折线变化图,继上篇“关于新型冠状病毒肺炎疫情追踪的可视化数据的采集、处理”的补充
- vue 是如何实现视图与viewmodel的双向绑定的?为什么数据一变化,视图就会立即更新,视图产生用户操作,viewmodel就能马上得知
- vue动态数据绑定1--如何监听一个对象的变化
- vue响应数据为二维码如何渲染到页面
- mongodb 如何追踪集群数据
- vue中如何实现数据的双向绑定
- 如何动态获取数据库表中的数据,数据库中的字段是在变化的
- Vue如何添加重复数据
- 在vue-cli环境下模拟数据接口及如何应用mockjs
- vue 中是如何检测数组变化
- vue 中如何在更改数据后拿到最新数据的方法(nextTick),解决vue异步更新获取数据问题(新手容易踩坑)
- vue数据变化后页面刷新
- MSSQL数据库中如何追踪数据的变更
- vue中如何让子组件修改父组件数据
- vue列表数据发生变化指令没有更新问题及解决方法
- 【vue-watch】watch监听数据变化 监听对象等
- 关于Vue动态路由参数变化,页面数据不更新问题?
- 如何跟踪数据库变化的数据--oracle
- vue2.0+基础知识连载(12)--- 监听数据变化
- vue.js 中如何监听watch:{}对象中的某个属性的变化,做相应的操作