Shulou(Shulou.com)06/01 Report--

This article mainly introduces the vue data response principle in the array example analysis, the article introduces in great detail, has a certain reference value, interested friends must read it!

Src/core/observer/index.js

Src/core/observer/array.js arrayMethods

When there is no attribute in data's array object, and then click the button to dynamically add an attribute, at this time there is no get and set, that is, there is no responsive mechanism, if you want to dynamically add an attribute to have responsive changes, then directly in the source of the data to initialize this property, see the next one.

When a property is added to the array object of the result returned to the backend, it is recommended that you first loop the assignment and then assign it to the variable in the corresponding data, so that the variable in data adds get and set to the properties in each array object.

For example: the backend returns an array object [{xx: 1}, {xx: 2}], and then we get the array object and assign the array object to this.list, then the xx attributes in the two array objects of list in my data have get and set, in other words, responsive. If we want to dynamically add a cc attribute to the current array object when we click the button. This.list [0] .cc = 2, please note that although the cc attribute is added to our corresponding array object, it is not responsive. To solve this problem, just add the cc property in a loop when getting the back-end data, set it to null, and then assign it to this.list.

Debug

We can see that the above array has only three elements at the beginning of the first step, and then when we execute the push method, we add an element, and the view is updated in real time, because vue responds to the method of modifying the array in the source code.

Let's take a look at the third and fourth part to modify the list array also took effect, but the view is not updated in real time, this is because vue only modified some array methods and added responsive operations to the objects in the array, this is because the array may be very long, for performance reasons, there is no responsive processing for every element of the array. If we want to implement the third and fourth step response, we can use the splice method of the array.

The above is all the contents of the article "sample Analysis of arrays in the principle of vue data response". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.