Vue. js uses Object. defineProperty to implement bidirectional binding and vuedefineproperty

Vue. js uses Object. defineProperty to implement bidirectional binding and vuedefineproperty

The Object. defineProperty method is amazing. vue. js implements bidirectional binding through it .. In addition, Object. observe is also withdrawn by the initiator of the draft .. So defineProperty is more necessary to understand.

Several lines of code to see how it works

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

It takes three parameters and is required ..

Input parameters

First parameter: target object
Second parameter: name of the attribute or method to be defined.
Third parameter: Properties of the Target attribute. (Descriptor)

The first two parameters are not mentioned much. You can understand the code at a Glance. The third parameter is descriptor to see which values are available.

Descriptor

He has the following values. Let's take a brief look at them. We will introduce them one by one in the following example.

• Value: attribute value (needless to say)
• Writable: If it is false, the attribute value cannot be overwritten and can only be read-only.
• Retriable: The sum switch. If it is false, it cannot be set (value, writable, retriable)
• Enumerable: whether it can be traversed in the for... in loop or listed in Object. keys.
• Get: Let's talk about it later.
• Set: Let's talk about it later.
  

Default Value of descriptor

Let's look at the first example.

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

We only set the value, but nothing else is set, but the first time it can be simply understood as (for the time being) it will help us set writable, retriable, enumerable by default. Both are set to the upper value, and the values are also false .. That is to say, the above Code is equivalent to the following code (Only when you set it 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.

Retriable

General switch. After setting false for the first time, the second setting will not work, for example

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

An error is reported.

Pay attention to the default value mentioned above... What if I do not set it for the first time .. Will help you set it to false .. So .. The second time. What if I set it again ?.. Yes, an error will be reported.

Writable

If it is set to fasle, it becomes read-only.

Var a ={}; Object. defineProperty (o, "B", {value: 123, writable: false}); console. log (. b); // print 37a. B = 25; // No error is thrown (it will be thrown in strict mode, even if the same value already exists) console. log (o. a); // print 37. The value assignment does not work.

Enumerable

The attribute feature 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 // note here}) console. log (Object. keys (a); // print []

For... in is similar.

Set and get

In descriptor, The accessors (get and set) and wriable or value cannot be set at the same time. Otherwise, an error occurs, that is, if you want to use get and set, you cannot use either writable or value.

Set and get.

Var a = {} Object. definePrope 'Enter the code 'rty (a, "B", {set: function (newValue) {console. log ("You want to assign a value to me, my new value is" + newValue)}, get: function () {console. log ("you get my value") return 2 // note here, I return 2 with hard encoding). B = 1 // print the value you want to assign to me. My new value is 1console. log (. b) // print your value to get my value // print 2 note here, it is the same as my hard code

In short, the "B" value assignment or value triggers the corresponding functions of set and get respectively.

This is the key to implementing observe.

Next, I will analyze the implementation source code of vue's observe and talk about how to implement $ watch step by step.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.