How does Vue track data changes?

background

This situation occurs from time to time at work: the data displayed on the page is incorrect and needs to be located by front-end colleagues.

In a SPA application built with Vue, the data finally displayed on the page may be simple or complex from initialization to final display. When you encounter complex data flows, it will be a headache to troubleshoot without a suitable method.

If you can see the call stack when the data changes, you can know what happened before the wrong data was generated and which step of the error led to the final error. By following the clues given by the call stack, you can quickly locate the problem.

example

<template>
  <div>
    <!-- Expected output: hello,world -->
    <!-- Actual output: 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>

Misconception - Setting breakpoints in Watch to view the call stack

We can see the callbacks of f1 and msg in the Call Stack on the right side of the page, but we cannot see f2 and f3. That is to say, f2 and f3 are lost, but in fact it is f2 that causes the data error.

Why is the calling information of f2 and f3 lost?

Because f1, f2, and f3 all modified msg, the Watcher of msg was triggered in the same microtask. Since f1 was triggered first, the triggering of f2 and f3 was invalid. When the Watcher callback finally runs, it only remembers that f1 triggered it, so the Call Stack at this time can only see the information of f1.

The right approach

Go to node_modules\vue\dist\vue.runtime.esm.js and add a breakpoint in the set method of defineReactive function. The key here is the name of the variable to be monitored.

Here, you can see the complete process of msg changing and quickly locate the problem caused by f2.

Summarize

By viewing the call stack, you can quickly locate where the data error occurs without being familiar with the project. Compared to using console.log or spending a lot of time to sort out the code logic, the data flow method can reduce a lot of workload.

The above is the details of how Vue tracks data changes. For more information about Vue tracking data changes, please pay attention to other related articles on 123WORDPRESS.COM!