vue. js Bi directional binding using Object. defineProperty

Object. defineProperty is a great method, and vue. js is bound bidirectionally through it. . Moreover, Object. observe was also withdrawn by the sponsors of the draft. . Therefore, it is even more necessary for defineProperty to know 1.

A few lines of code to see how he uses it

var a= {}
Object.defineProperty(a,"b",{
 value:123
})
console.log(a.b);//123

Quite simply, it accepts three parameters, all of which are required. .

Pass in parameters

Parameter 1: Target object
Parameter 2: The name of the property or method to be defined.
The third parameter: the attributes owned by the target attribute. (descriptor)

The first two parameters do not say much, 1 look at the code to understand, mainly look at the third parameter descriptor, see what values there are

descriptor

He also takes the following values, let's briefly know 1, and introduce the following examples one by one.

value: The value of the attribute (needless to say) writable: If it is false, the value of the property cannot be overridden and can only be read-only configurable: Master switch. If 1 denier is false, it can no longer be set (value, writable, configurable) enumerable: Whether it can be traversed in the for... in loop or enumerated in Object. keys. get: 1 will be detailed set: 1 will be detailed

descriptor Default

Let's look at the first example again

var a= {}
Object.defineProperty(a,"b",{
 value:123
})
console.log(a.b);//123

We only set value, and nothing else, but the first time it can be simply understood as (for the time being) it will help us put writable, configurable and enumerable by default. They are all set to values, and the values are all false. . That is to say, the above code is equivalent to the following (only when it is set for the first time).

var a= {}
Object.defineProperty(a,"b",{
 value:123,
 writable:false,
 enumerable:false,
 configurable:false
})
console.log(a.b);//123

The above is very important. . And the above understanding does not work for set and get

configurable

Master switch, after setting false for the first time, what setting will not work for the second time, for example

var a= {}
Object.defineProperty(a,"b",{
 configurable:false
})
Object.defineProperty(a,"b",{
 configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

You will report an error.

Note the default values mentioned above. . . What happens if you don't set it the first time. . Will help you set it to false. . So. . The second time. What happens when he is set up again? . . By the way, you will report an error

writable

If set to fasle, it becomes read-only.

var a = {}; 

Object.defineProperty(o, "b", { 
 value : 123,
 writable : false });

console.log(a.b); //  Print  37
a.b = 25; //  No errors are thrown (in strict mode, even if the same value has been thrown before) 
console.log(o.a); //  Print  37 ,   Assignment does not work. 

enumerable

The attribute attribute enumerable defines whether the attributes of an object can be enumerated in the for... in loop and Object. keys ().

var a= {}
Object.defineProperty(a,"b",{
 value:3445,
 enumerable:true
})
console.log(Object.keys(a));//  Print ["b"]

Change to false

var a= {}
Object.defineProperty(a,"b",{
 value:3445,
 enumerable:false // Pay attention. It's changed here 
})
console.log(Object.keys(a));//  Print []

for... in is similar, so I won't go into details

set and get

You cannot set accessors (get and set) and wriable or value at the same time in descriptor, otherwise you will be wrong, that is to say, you cannot use either writable or value if you want to use get and set.

set and get, what do they do?

var a= {}
Object.definePrope` Please enter a code `rty(a,"b",{
 set:function(newValue){
 console.log(" You want to assign me a value , My new value is " + newValue)
 },
 get:function(){
 console.log(" You take my value ")
 return 2 // Note that here, I hard-coded to return 2
 }
})
a.b =1 // Print   You want to assign me a value , My new value is 1
console.log(a.b) // Print   You take my value 
     // Print  2  Note that here, the same as my hard-coded 

To put it simply, when this "b" is assigned or selected, the functions corresponding to set and get will be triggered respectively.

This is the key to implementing observe.

In the next article, I will analyze the source code of observe of vue, and talk about how to realize $watch step by step.