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 追踪数据变化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)

    vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)

    话不多说了,先上一张Demo图,实现的功能有:左侧图例.右侧瀑布图.鼠标移入弹出当前坐标对应的数据信息(有优化的空间,大家自由发挥). 图例使用到的插件 这里推荐使用安装npm插件colormap 瀑布图主体内容 这里不多做解释了,都是一些原生标签还有vue绑定的事件,可以根据实际项目情况自己封装成组件,我这里是写在一起的. <template> <div> <div class="content"> <div class="neir

  • 关于vuex强刷数据丢失问题解析

    vuex-persistedstate 核心原理:在本地存储中存入所有的vuex数据,页面刷新时到缓存中取数据,放到vuex中 下载:$ npm install vuex-persistedstate -S 在store中引入插件 import persistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [persistedState()] }) vuex-persistedst

  • 用vue设计一个数据采集器

    场景 在业务上现在有一个场景,当发生业务行为变化时,需要对各个模块的行为进行数据收集,数据用途可以用作回顾,也可以是例如监控这样的场景. 核心问题 说白了这个需求就是需要对各个模块状态变更进行记录,然后再格式化上传到服务端. 解题思路有两种一种是状态监听,第二主动收集. 状态监听 状态监听优势 快速实现利用状态管理和wacth的机制很快就知道不同模块的状态变更,然后就可以获取数据,再格式化数据,发送给服务端 状态监听劣势 wacth的重复监听,只要使用了wacth,不管是不是你所需要的数据,只要

  • Vue中避免滥用this去读取data中数据

    前言 在Vue中,data选项是个好东西,把数据往里一丢,在一个Vue组件中任何一个地方都可以通过this来读取data中数据.但是要避免滥用this去读取data中数据,至于在哪里要避免滥用,如果滥用会导致什么后果,本专栏将会一一揭晓. 一.用this读取data中数据的过程 在Vue源码中会把data中数据添加getter函数和setter函数,将其转成响应式的.getter函数代码如下所示: function reactiveGetter() { var value = getter ?

  • 手写Vue2.0 数据劫持的示例

    一:搭建webpack 简单的搭建一下webpack的配置.新建一个文件夹,然后init一下.之后新建一个webpack.config.js文件,这是webpack的配置文件.安装一下简单的依赖. npm install webpack webpack-cli webpack-dev-server -D 在同级目录下新建一个public/index.html和src/index.js,作为出口文件和入口文件. j简单配置一下webpack, 在webpack.config.js文件中: cons

  • Vue 重置data的数据为初始状态操作

    在某些情况下,需要重新使用data中的数据,但是data中的数据已经被各种表单.变量等赋值,那么怎么重置data的值呢? 1. 逐个赋值 ... data() { return { name: '', sex: '', desc: '' } } ... // 逐个赋值 this.name = '' this.sex = '' this.desc = '' 这个方法比较笨,当然也可以实现效果,但是一个一个去重新赋值比较麻烦而且代码看起来也会比较乱. 下面这个方法肯定是你喜欢的,一行代码搞定- 2.

  • vue 数据(data)赋值问题的解决方案

    vue 数据(data)赋值问题的解决方案

    总结一下我遇到的一个纠结很久的问题. 在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性: 执行后前端报错: 原因: 在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined. 解决方案: 一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性 二)使用箭头函数 补充:解决 vue

  • SpringBoot+Vue实现数据添加功能

    一.添加代码生成器 用来自动为数据库映射类建立:mapper.service.controller 注:代码生成器的写法,参考官方文档:https://mp.baomidou.com/ package com.hanmh.utils; import com.baomidou.mybatisplus.core.toolkit.StringPool; import com.baomidou.mybatisplus.generator.AutoGenerator; import com.baomido

  • Vue2.0/3.0双向数据绑定的实现原理详解

    Vue2.0/3.0双向数据绑定的实现原理详解

    Vue2.0/3.0 双向数据绑定的实现原理 双向数据绑定简意 即数据的改变能让页面重新渲染 Vue2.0 ES5的原理: Object.defineProperty 对数据进行拦截 简单小案例 <body> 姓名: <span id="name"></span> <br /> <input type="text" id="inputName" /> </body> 改变in

  • vue 数据双向绑定的实现方法

    vue 数据双向绑定的实现方法

    1. 前言 本文适合于学习Vue源码的初级学者,阅读后,你将对Vue的数据双向绑定原理有一个大致的了解,认识Observer.Compile.Wathcer三大角色(如下图所示)以及它们所发挥的功能. 本文将一步步带你实现简易版的数据双向绑定,每一步都会详细分析这一步要解决的问题以及代码为何如此写,因此,在阅读完本文后,希望你能自己动手实现一个简易版数据双向绑定. 2. 代码实现 2.1 目的分析 本文要实现的效果如下图所示: 本文用到的HTML和JS主体代码如下: <div id="ap

  • Vue组件传值过程中丢失数据的分析与解决方案

    Vue组件传值过程中丢失数据的分析与解决方案

    前言 在上一篇文章 JavaScript 中的两种数据类型中,分别介绍了基本类型和引用类型,以及引用类型的浅拷贝与深拷贝.这里需要注意的是,该文章中深拷贝引用类型值的方法,并不是完美的,引用类型值中的某些属性值,仍不能完整地复制到新的变量中.比如函数值,在深拷贝过程中,就会丢失. 问题 在实际项目中,假如使用了二次封装的组件,并且封装的组件内部做了一些属性值的深拷贝操作,就有极有可能因为传入的属性值是引用类型的值,导致丢失部分数据. 举例 以基于 el-table 封装的 ak-table 组件

随机推荐