How does Vue track data changes?

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!

You may also be interested in:
  • Detailed explanation of the implementation principle of Vue2.0/3.0 two-way data binding
  • Analysis on the problem of data loss caused by forced refresh of vuex
  • Vue+canvas realizes the effect of refreshing waterfall chart from top to bottom in real time (similar to QT)
  • Solution to Vue data assignment problem
  • Vue resets data to its initial state
  • Analysis and solution of data loss during Vue component value transfer
  • SpringBoot+Vue realizes data adding function
  • Handwritten Vue2.0 data hijacking example
  • Vue data two-way binding implementation method
  • Avoid abusing this to read data in data in Vue
  • Design a data collector with vue

<<:  Solution to the error when installing Docker on CentOS version

>>:  Docker creates MySQL explanation

Recommend

Steps to transplant the new kernel to the Linux system

1. Download the ubuntu16.04 image and the corresp...

Understand the principles of MySQL persistence and rollback in one article

Table of contents redo log Why do we need to upda...

7 skills that great graphic designers need to master

1》Be good at web design 2》Know how to design web p...

Small problem with the spacing between label and input in Google Browser

Code first, then text Copy code The code is as fol...

Detailed explanation of JavaScript array deduplication

Table of contents 1. Array deduplication 2. Dedup...

JavaScript to implement the aircraft war game

This article shares with you how to use canvas an...

HTML thead tag definition and usage detailed introduction

Copy code The code is as follows: <thead> &...

Linux directory switching implementation code example

Switching files is a common operation in Linux. W...

Summary of MySQL Undo Log and Redo Log

Table of contents Undo Log Undo Log Generation an...

Tutorial on installing mysql under centos7

Recently, I plan to deploy a cloud disk on my hom...

Script example for starting and stopping spring boot projects in Linux

There are three ways to start a springboot projec...

MySQL 5.7.17 Compressed Version Installation Notes

This article shares the installation steps of MyS...

File upload via HTML5 on mobile

Most of the time, plug-ins are used to upload fil...

10 key differences between HTML5 and HTML4

HTML5 is the next version of the HTML standard. M...