Before we talk about the vUE responsivity principle, we need to take a look at defineProperty, an Es5 Object attribute

Vue throughObjectGetter /setter of.defineProperty listens for collected dependencies, notifies changes when properties are accessed and modified, and updates view data; Vue cannot detect the addition or deletion of object attributes. Since Vue performs getter/setter conversion procedures on the property when it initializes the instance, the property must exist on the Data object for Vue to convert it so that it is responsive.Copy the code

DefineProperty is not the core data binding for an object. It is the attribute tag for the object, but the get/set in the attribute is reactive

Function:

Sets the value of an object property or modifies the value of an object property and returns the object

Grammar:

Object.defineProperty(obj, prop, descriptor)
Copy the code

Parameter Description:

  • Obj: the name of the object
  • Prop: Name of the property to be set
  • Descriptor: Property descriptor to be defined or modified. The parameter is an object whose common setting is a property value
1.Value: indicates the value of the attribute2.Writeable: Whether the property is writeable, if set tofalse, any operation to overwrite this property will not be valid (but will not report an error). The default isfalse.3.Signals: Works without any additional controlfalse, any attempt to delete the target attribute or modify the following properties (writable, 64x, Enumerable) of the attribute will be invalid. The default is different, cis, and cisfalse
4.Enumerable: Whether you can eitherfor. In loop to iterate out or inObject.keys. The default isfalse
5: get: function to call when reading property, defaultundefined
6: set: function to call when writing, defaultundefined
Copy the code

Code practices:

var obj = {
    a:1.b:2
}
Object.defineProperty(obj,'a', {writable:false
})
console.log(Object.getOwnPropertyDescriptor(obj,"a"));
Copy the code