Vue 如何追踪数据变化

这篇文章主要介绍了Vue 如何追踪数据变化，帮助大家更好的理解和学习使用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>