Detailed explanation of the principle of Vue monitoring data

1. Introduction
II. Monitoring Objects

2.1 Why do we need to monitor objects?
2.2 Data Agent
2.3 Object monitoring related API Vue.set
2.4 Assigning multiple new values to an object

3. Monitoring Array

Summarize

1. Introduction

First, draw a simple picture.

When we write Vue, we always deal with data. We write our target data in data, and then render the data responsively through the {{xxx}} format in the difference expression of the template. When the data in data changes, the orange line here will cause the difference expression to change. So the question is, how do we monitor the changes in data? This involves the issue of Vue monitoring data.

II. Monitoring Objects

2.1 Why do we need to monitor objects?

First write the static pages you need.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update Data</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <ul>
            <li v-for="p in persons" :key="p.id">
                {{p.name}} - {{p.age}} = {{p.sex}}
            </li>
        </ul>
    </div>
 
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data:{
                persons:
                    {id:'001',name:'黑猫几绛',age: 20, sex: 'unknown'},
                    {id:'002',name:'白猫几绛',age: 23, sex: '男'},
                    {id:'003',name:'阿猫几绛',age: 18, sex: '女'}
                ]
            }
        })
    </script>
</body>
</html>

Now let's assume that there is a requirement to add a button on the page, through which the data with id 002 can be modified.

<button @click="change">Click to modify Baimao Jijiang</button>
 
  methods:{
      change(){
          this.persons[1].name = 'White Horse'
          this.persons[1].age = 17
          this.persons[1].sex = 'Unknown'
      }
  }

By modifying the attributes one by one, we can change the data with id 002, but is this a bit cumbersome? Can we change such a long modification into an object?

 this.persons[1] = {id:'002',name:'白马',age: 17, sex: 'unknown'}

At this time, after clicking the button in the browser, the page does not respond. However, unexpectedly, in the vm instance object, the data of persons[1] was indeed changed!

To solve this problem, we can first look at another example, then view the specific execution process by outputting it in the browser, and then come back to this problem after understanding how to monitor it.

2.2 Data Agent

To understand data monitoring, you also need to understand a prerequisite concept: data agent.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Monitoring Object</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data:{
               name: 'Black Cat Jijiang',
               age: 20
            }
        })
    </script>
</body>
</html>

In the past, if we wanted to access data in data, we could directly get the specific value through the instance object, such as vm.name and vm.age. In fact, this is a simplified way of writing after doing data proxy.

Vue processes data and puts the data in _data. The instance object can get the processed data through ._data. The only difference is that the value of the attribute is no longer given directly, but is obtained through the get method, which is somewhat similar to the getter method used in object-oriented languages such as JAVA to obtain private variables within a class. There is also a set method here. When the data value in data changes, the set method will be called, causing the template to be re-parsed, and then a new virtual DOM will be generated to compare the new and old DOMs, and finally the page will be updated.

This actually involves source code issues. We will not consider source code in this article, otherwise it will be too complicated. To put it simply, there is actually such a method inside Vue:

vm._data = data = new Observer(data)

In the Observer function, first use Object.keys to get all the properties of data to form an array, then traverse the array, use Object.defineProperty to implement data hijacking, and finally give the final result of the calculation to _data.

2.3 Object monitoring related API Vue.set

Let’s go to the static page first.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update Data</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <h2>School name: {{name}}</h2>
       <h2>School address: {{address}}</h2>
       <hr/>
       <h2>Student name: {{student.name}}</h2>
       <h2>Student gender: {{student.sex}}</h2>
       <h2>Student age: {{student.age}}</h2>
       <h1>Friends</h1>
       <ul>
           <li v-for="(f,index) in student.friends" :key="index">
               {{f.name}} - {{f.age}}
           </li>
       </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data:{
                name:'MIT',
                address:'UUU',
                student:
                    name: 'tom',
                    age: 20,
                    friends:
                        {name: 'jack', age: 21},
                        {name: 'mary', age: 20}
                    ]
                },
            }
        })
    </script>
</body>
</html>

You may notice that the sex in the template does not actually exist in the data. When outputting a property value that does not exist in an object, undefined will be output, but Vue will not display the undefined value after processing, which means that at this time, there is an empty value after the student's gender on the page, and no error will appear in the console. Now let's put forward a requirement. If we need to add a new gender attribute for students. The requirement is that the existing data in data cannot be changed, that is, sex cannot be directly put into data.

According to the _data introduced earlier, we can try to bind the sex attribute directly through _data. Then I found that it was not rendered on the page. In fact, this is somewhat similar to the problem in 2.1. The analysis is as follows.

Let's print vm's _data first. As can be clearly seen in the figure below, the sex attribute name and the unknown attribute value are successfully added to the student object. But if you continue to look down, there is no method for sex in the many get and set methods below, which means that this attribute added later has not become responsive data.

To solve this problem, we can use the API provided by Vue, namely the Vue.set() method, to make the data added later also become responsive data. The first parameter target of this method indicates to whom the data is to be added, the second parameter key indicates the name of the attribute to be added, and the third parameter indicates the attribute value.

At this point we can use Vue.set(vm._data.student,'sex','unknown') to not only change the properties in _data, but also monitor and change the data on the page. There is also an API with the same effect, namely vm.$set, which has the same usage as Vue.set() and the same parameters, vm.$set(vm._data.student,'sex','unknown'). The data added by these two methods can become responsive data.

After implementing the function, we can consider optimizing the abbreviation. Due to the data proxy, vm.student === vm._data.student, so it can be abbreviated to Vue.set(vm.student,'sex','unknown).

Next, we will verify the idea in the browser in actual coding. Suppose we add the sex attribute by clicking a button. I will not describe it in detail here and will just paste the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update Data</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <button @click="addSex">Click the button to add a new gender</button>
       <h2>School name: {{name}}</h2>
       <h2>School address: {{address}}</h2>
       <hr/>
       <h2>Student name: {{student.name}}</h2>
       <h2>Student gender: {{student.sex}}</h2>
       <h2>Student age: {{student.age}}</h2>
       <h1>Friends</h1>
       <ul>
           <li v-for="(f,index) in student.friends" :key="index">
               {{f.name}} - {{f.age}}
           </li>
       </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data:{
                name:'MIT',
                address:'UUU',
                student:
                    name: 'tom',
                    age: 20,
                    friends:
                        {name: 'jack', age: 21},
                        {name: 'mary', age: 20}
                    ]
                },
            },
            methods:{
                addSex(){
                    // In methoods, this refers to the vm instance object // This can also be written as this.$set(this.student, 'sex', '男')
                    Vue.set(this.student, 'sex', 'male')
                }
            }
        })
    </script>
</body>
</html>

However, this method has certain limitations. When the addition is successful, it is set to the student object in the data. What if it is set directly to the data object? For example, suppose you need to add a new attribute school establishment date time here. If you still use the Vue.set method, an error will be reported.

It can be seen that this method can only be used to add new properties to responsive objects (such as data.student here) and trigger view updates. Because Vue cannot detect normal new properties.

2.4 Assigning multiple new values to an object

Sometimes you may need to assign multiple new properties to an existing object, such as using Object.assign() or _.extend(). However, new properties added to the object in this way will not trigger an update. So in this case, you should create a new object using the original object together with the properties of the object you want to mix in.

For example, if I want to add height and weight attributes to student that did not exist before, I can do this:

const add = {'height': 180, "weight": 150}
this.student = Object.assign({},this.student, add)

The original object and the newly added object are merged and assigned to an empty new object, which is then assigned to this.student. Finally, the data can be added to the student in a responsive manner.

3. Monitoring Array

Still go to the static page first.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update Data</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <button @click="addSex">Click the button to add a new gender</button>
       <h2>School name: {{name}}</h2>
       <h2>School address: {{address}}</h2>
       <hr/>
       <h2>Student name: {{student.name}}</h2>
       <h2>Student gender: {{student.sex}}</h2>
       <h2>Student age: {{student.age}}</h2>
       <h1>Friends</h1>
       <ul>
           <li v-for="(f,index) in student.friends" :key="index">
               {{f.name}} - {{f.age}}
           </li>
       </ul>
       <h1>Hobbies</h1>
       <ul>
           <li v-for="(h,index) in student.hobby" :key="index">
               {{h}}
           </li>
       </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data:{
                name:'MIT',
                address:'UUU',
                student:
                    name: 'tom',
                    age: 20,
                    friends:
                        {name: 'jack', age: 21},
                        {name: 'mary', age: 20}
                    ],
                    hobby:['eat', 'sleep', 'play with beans']
                },
            },
            methods:{
                addSex(){
                    this.$set(this.student, 'sex', 'male')
                }
            }
        })
    </script>
</body>
</html>

After printing vm._data in the console, we can clearly see that for the hobby array in student, the array as a whole has get and set, which is responsive. However, the elements in the array are not responsive, but simply hung in the array. This is why in 2.1, when we tried to reassign the array index subscript, there was no response on the page. If you change the hobby array to an object and print it again, you will find that the properties in the object are responsive. From this we can roughly guess that in Vue, if you want to modify the value in an array by index, you need to use some special methods.

Where does the method come from? Now we can see what the Vue documentation says. In the page of Document List Rendering->Array Update Detection->Change Method, there is such a sentence:

Vue wraps the watched array mutation methods so they will also trigger view updates. The wrapped methods include:
push()pop()shift()unshift()splice()sort()reverse()

If we want to modify the data in the array, we might as well try the above seven methods. Seeing these methods, you may think of the methods on the Array prototype chain, but this is not entirely correct here. Vue has wrapped and encapsulated these methods. When Vue parses these methods, the first step is still to call the methods in the Array prototype chain normally, and the second step is to re-parse the template. This is why using these methods can trigger view updates, because after re-parsing the template, a new virtual DOM will be generated to compare the new and old DOMs, and finally update the page. This idea can be confirmed by the fact that vm._data.student.hobby.push === Array.prototype.push is false.

For example, here, if we want to change the "hitting beans" in hobby to "learning", what should we do?

Before I touched on these points I would use the following code, which would result in an incorrect rendering. The page is not updated after changing the data.

 this.student.hobby[2] = 'Study'

Next, let’s try two methods. First, let’s try the array operation method just introduced.

this.student.hobby.splice(2,3,'learning')

Next, try the Vue.set method introduced before.

Here we would like to add that in 2.3, when we introduced how to use this method to modify the value in an object, the second parameter of the method was the attribute name; when this method is used in an array, the second parameter should be the subscript of the element in the array.

this.$set(this.student.hobby,2,'learning')

Both methods can successfully modify the data in hobby and successfully update it to the page.

In general, you cannot assign values by array index. However, you can change the direction of the array itself. As we have seen in the previous picture, the hobby array itself is responsive and can be monitored through get and set. For example, filter is used in business logic to filter the array, and then assigned to the array that already exists in data. Here we can look again at the introduction to replacing arrays in the documentation. Methods such as filter, concat, and slice do not change the original array, but always return a new array. When using the mutation method, the old array can be replaced by the new array.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Monitoring changes and methods of routing parameters in Vue
Vue implements route monitoring and parameter monitoring
Implementation of monitoring multiple parameters simultaneously in Vue

<<: Usage of if judgment in HTML

>>: Analysis of the cause of docker error Exited (1) 4 minutes ago

jQuery framework implements three animation methods of element display and hiding

When a Linux (Ubuntu) user enters an incorrect password N times in a row to log in, the system will be automatically locked for X minutes

Blog

Detailed tutorial of using stimulsoft.reports.js with vue-cli

Blog

Detailed explanation of the principle of Vue monitoring data

Table of contents

1. Introduction

II. Monitoring Objects

2.1 Why do we need to monitor objects?

2.2 Data Agent

2.3 Object monitoring related API Vue.set

2.4 Assigning multiple new values to an object

3. Monitoring Array

Summarize

jQuery framework implements three animation methods of element display and hiding

React Native startup process detailed analysis

Vue+SSM realizes the preview effect of picture upload

Detailed explanation of DOM style setting in four react components

A brief discussion on the difference between Mysql primary key index and non-primary key index

About React Native unable to link to the simulator

HTML web page hyperlink tag

This article will show you the basics of JavaScript: deep copy and shallow copy

When a Linux (Ubuntu) user enters an incorrect password N times in a row to log in, the system will be automatically locked for X minutes

Detailed tutorial of using stimulsoft.reports.js with vue-cli

Recommend

Detailed Linux installation tutorial

Summary of how JS operates on pages inside and outside Iframe

How to quickly modify the table structure of MySQL table

WeChat applet implements calculator function

Detailed explanation of the solution to the error of using systemctl to start the service in docker

How to use CSS to fill the parent container div with img images and adjust the container size

Example code for CSS to achieve image zooming effect and slow transition effect when the mouse moves in

A complete record of a Mysql deadlock troubleshooting process

A record of pitfalls in JS regular matching

MySql inserts data successfully but reports [Err] 1055 error solution

TCP third handshake data transmission process diagram

Nginx access log and error log parameter description

JS+AJAX realizes the linkage of province, city and district drop-down lists

A brief understanding of the three principles of adding MySQL indexes

Detailed explanation of prototypes and prototype chains in JavaScript

Table of contents

1. Introduction

II. Monitoring Objects

2.1 Why do we need to monitor objects?

2.2 Data Agent

2.3 Object monitoring related API Vue.set

2.4 Assigning multiple new values ​​to an object

3. Monitoring Array

Summarize

Recommend

2.4 Assigning multiple new values to an object