Here’s what I noticed when I read the article:

  1. Notice the properties in the data method
  2. For example, the object obj does not listen for new property obj.test added outside of data
  3. Direct assignment is responsive when requesting data on a daily basis
  4. Generally, when we make segmented requests, for example, the newly added data in the array will not be monitored, so we need watch to listen, or use the set method to achieve responsiveness
  5. You can see the watch example below, which waits for the DOM to update once before refreshing

For those who are new to VUE, they often encounter the problem that the data is updated but the template is not updated. The following will analyze common errors based on the responsive features of VUE and the asynchronous update mechanism:

Reactive data misunderstandings due to asynchronous updates

The processing of asynchronous data is basically inevitable, and the data will not be updated if it is not properly processed. However, there is a case that the data can be updated normally even if it is not properly processed, which will cause a misunderstanding, as shown below:

  • The template
<div id="app">
        <h2>{{dataObj.text}}</h2>
</div>
Copy the code
  • js
new Vue({ el: '#app', data: { dataObj: {} }, ready: function () { var self = this; / / setTimeout(function () {self.dataobj = {}; self.dataObj['text'] = 'new text'; }, 3000); }})Copy the code

The above code is very simple. We know that only data declared in data in VUE can be responsive, so we first declare an empty dataObj object in data, and then execute two lines of code in the asynchronous request, as follows:

self.dataObj = {}; 
self.dataObj['text'] = 'new text';
Copy the code

First empty the raw data, then add and assign a text property. So far everything is as we expected, the data and templates are updated.

So, is dataobj.text responsive?

—

The template has been updated and should be responsive, but if you think so you’re already mistaken, because we didn’t declare the.text property in data in the first place, so it’s not responsive.

But the template has actually been updated. What’s going on here?

That’s because vue dom updates are asynchronous, meaning that the directive doesn’t update immediately after the setter occurs, and there’s a delay in updating the directive. When the directive update is actually performed, the.text property has already been assigned, so the directive updates the template with a new value.

The specific process is as follows:

  • self.dataObj = {};Setter operation occurs
  • Vue detects setter operations and notifies related directives to perform update operations
  • self.dataObj['text'] = 'new text';Assignment statement
  • Instruction update starts execution

So the real trigger update operation is self.dataobj = {}; So just looking at the above example, only the layer of data with responsive characteristics, dataObj, does not have its sub-attributes.

Note: In fact, the VUE documentation has stated that new and deleted attributes are not detected by vUE.

var a = {}; a.b = 0; // add b attribute a = {c: 0}; // Change the value of the a attributeCopy the code

The above two assignment methods have different effects on VUE.

Comparison examples:

The template

<div id="app">
        <h2>{{dataObj&&dataObj.text}}</h2>
</div>
Copy the code

js

new Vue({ el: '#app', data: { dataObj: {} }, ready: function () { var self = this; SetTimeout (function () {self.dataObj['text'] = 'new text'; }, 3000); }})Copy the code

The template for the example above is not updated.

Vue.$set

The $set method allows you to add a reactive property and its children to the property, but only if it is a new property. If it is an existing property, the method does not work.

new Vue({ el: '#app', data: { dataObj: {} }, ready: function () { var self = this; SetTimeout (function () {var data = {name: 'xiaofu', age: 18}; var data01 = { name: 'yangxiaofu', age: 19 }; self.dataObj['person'] = {}; self.$set('dataObj.info', data); self.$set('dataObj.person', data01); }, 3000); }})Copy the code

As shown above, the.person property is not reactive.