Thoughts on getter and setter caused by Vue. js

Recently, the company decided to use Vue because of its new project. javaScript code is used, but an interesting thing is found in the Process of use, because the discovery involves some thoughts on getter and setter, for more information, see this article. For more information, see. Cause

When I printed the attributes of the data object under the Vue instance, I found an interesting thing:

Each of its attributes has two corresponding get and set methods. I think this is an extra step. So I checked the implementation principle of Vue bidirectional binding on the Internet, and Angular. the implementation principles of js two-way binding are completely different. Angular uses dirty data detection. When the Model changes, it checks whether all views are bound with relevant data, and then changes the view. The publishing and subscription modes used by Vue are point-to-point data binding.

Vue Data Binding takes only two steps: compile => link.

I keep thinking about what vue uses to listen to users' modifications to the Model until I find that each attribute of Vue data has the set and get attributes.

In normal times, we create an object and modify its attributes as follows:

var obj = { val:99}obj.val = 100;console.log(obj.val)//100

There is no problem, but if you want to monitor it, what will you do when I modify the attributes of this object?

Related ideas

Getter and setter are required.

Let's assume that I want to add a name attribute to a canonicalized object, and each time I update the name attribute, I want to do something. We can do this:

Var Coder = function () {var that = this; return {get name () {if (that. name) {return that. name} return 'You have not named'}, set name (val) {console. log ('you have converted the name into '+ val) that. name = val }}var isMe = new Coder () console. log (isMe. name) isMe. name = 'zhou shen' console. log (isMe. name) console. log (isMe)

Output:

You will find that this object has the same effect as the data object in the top Vue and has the get and set attributes.

It is interesting to analyze the above Code step by step.

First, create an object literal:

var Coder = function() {...}

Then cache this:

var that = this;

Next, the most important thing is that we return an object back:

{ 　　get name(){...}, 　　set name(val){...} }

As the name suggests, get is the value, set is the value, under normal circumstances, we use obj for the value and value. but how can I know that the object value has changed? So it was set's turn to debut.

You can think of get and set as functions. Of course, you can just understand this. This is totally different.

Next, create an MFA instance, isMe. At this time, isMe has no name attribute. When we call isMe. name, we will enter get name (){...} first, determine whether isMe has the name attribute. If the answer is no, add a name attribute and assign a value to it: "You have not named". If there is a name attribute, the name attribute is returned.

You must know how to use get. Right, You can regard get as a value function, and the return value of the function is the value it gets.

I feel that the set attribute is important. When I assign a value to an instance:

IsMe. name = "Zhou Shen"

In this case, set name (val ){...}; the parameter val is the value assigned to the name attribute. In this function, I can do many things, such as bidirectional binding! Because every change to this value must go through set, other methods cannot change it, which is equivalent to a 10 thousand listener.

There is another way to implement this function.

The object prototype of ES5 has two new attributes: _ defineGetter _ and _ defineSetter _, which are used to bind get and set to the object.

You can write as follows:

Var Coder = function () {} Coder. prototype. _ defineGetter _ ('name', function () {if (this. name) {return this. name} else {return 'You have not named'}) Coder. prototype. _ defineSetter _ ('name', function (val) {this. name = val}) var isMe = new Coder () console. log (isMe. name) isMe. name = 'zhou shen' console. log (isMe. name) console. log (isMe)

The results are the same. We recommend that you use the following method. Because it is written on the prototype, it can be inherited and reused.

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.

For more information about getter and setter ideas caused by Vue. js, please pay attention to PHP!