Let's talk about the thoughts about getters and setters caused by Vue.js

Cause

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

Each of its attributes There are two corresponding get and set methods. I thought this was unnecessary, so I went online to check the implementation principle of Vue two-way binding, only to find that it is completely different from the implementation principle of Angular.js two-way binding. Angular It uses data dirty detection. When the Model changes, it will detect whether all views are bound to relevant data, and then change the views. The publish-subscribe model used by Vue is point-to-point data binding.

Vue’s data binding has only two steps, compile=>link.

I have been thinking about how Vue monitors user modifications to the Model. It wasn’t until I discovered that each attribute in Vue’s data has set and get attributes that I understood.

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

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

There is no problem, but if you want If you monitor it, when I modify the properties of this object, I need to do something. What will you do?

Related thoughts

This requires the use of getters and setters.

Suppose I want to add a name attribute to a coder object, and every time I update the name attribute, I have to complete something. We can do this:

var Coder = function() {
 var that = this;
 return {
  get name(){
   if(that.name){
    return that.name
   }
   return '你还没有取名'
  },
  set name(val){
   console.log('你把名字修成了'+val)
   that.name = val
  }
 }
}
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

Output:

You will find that the printed effect of this object and the top data object in Vue are the same, both have get and set attribute.

Let’s analyze the above code step by step, it’s very interesting.

We first create an object literal:

var Coder = function() {...}

Then cache this:

var that = this;

The next thing is the most important, we return an object back:

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

As the name suggests, get is the value and set is Assignment, under normal circumstances, we use obj.prop to obtain and assign values, but there is a problem with this. How do I know that the value of the object has changed? So it’s the set’s turn to appear.

You can understand get and set as functions. Of course, you can only understand them this way. They are two completely different things.

Next create an instance of the coder, isMe; at this time, isMe does not have a name attribute. When we call isMe.name, we will enter get name(){...}, First determine whether isMe has a name attribute. If the answer is no, then add a name attribute and assign a value to it: "You haven't given a name yet"; if there is a name attribute, then return the name attribute.

After seeing this, you must know how to use get. Yes, you can think of get as a function that takes a value. The return value of the function is the value it gets.

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

isMe.name="周神"

At this time, it will enter set name(val) {...}; The formal parameter val is the value I assigned to the name attribute. In this function, I can do a lot of things, such as two-way binding! Because every change of this value must go through set, it cannot be changed by other methods, which is equivalent to a universal listener.

There is another way to achieve this function.

ES5’s object prototype has two new attributes __defineGetter__ and __defineSetter__, which are specially used to bind get and set to objects.

can be written like this:

var Coder = function() {
}
Coder.prototype.__defineGetter__('name', function() {
 if (this.name) {
  return this.name
 }else{
  return '你还没有取名'
 }
})
Coder.prototype.__defineSetter__('name', function(val) {
 this.name = val
})
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

The effect is the same. It is recommended to use the following method, because it is written on the prototype, so it can Inherit and reuse.

Summary

The above is the entire content of this article. I hope the content of this article can bring some help to everyone's study or work. If you have any questions, you can leave a message to communicate.

For more thoughts on getters and setters caused by Vue.js, please pay attention to the PHP Chinese website for related articles!