Note: Vue’s data binding listens for changes in an object property and makes corresponding view updates through dependency collection
Can all types of property changes in an object be listened for?
Object. DefineProperty is used to simply listen for Object property changes through the getter/setter of the Object, and to do the corresponding dependency handling through dependencies.
However, this can be problematic, especially if the value of an attribute in an object is an array.
As the Vue documentation states:
Due to JavaScript limitations, Vue cannot detect the following array changes:
For responsive arrays, when browsers support the _proto_ attribute, push methods are first looked for from their prototype arrayMethods, that is, the overridden method. After processing, array changes are notified to its subscribers and the page is updated. ArrayMethods (); array. prototype ();
When the browser does not support the _proto_ attribute, methods such as push will be queried from the Array itself, or if not, up to array. proptotype.
For non-responsive arrays, when methods such as push are used, query directly from Array.prototype.
It is worth mentioning that the source code by judging whether the browser supports _proto_ to use the protoAugment and copyAugment methods respectively to apply the rewritten array method to the array, because the _proto_ attribute is not supported for IE10 and below browsers
Determines whether the current environment can use the object’s _proto_ property, which in IE11 and later uses export const hasProp = ‘proto’ in {}
Conclusion:
After processing the array into responsive data, if you change the array using the original array methods, the array value changes, but it doesn’t trigger setters for the array to tell all dependent places to update. To do this, VUE listens for the array changes by overwriting some of the array’s methods. A manual trigger in the overridden method notifies all dependencies of the array to be updated.
Vue re-attributes
push pop shift unshift splice sort reverse