The getter and setter thought caused by Vue

The company's new project decided to use Vue.js, and when I printed out the properties in the data object under the Vue instance, I found an interesting thing:

Each of its properties has two corresponding get and set method, I think this is superfluous, so went online check vue two-way binding implementation principle, Only to find that it and angular.js two-way binding implementation principle is completely different, angular is used for data dirty detection, when the model changes, will detect whether all views are bound to the relevant data, and then change the view. The publish-subscribe pattern used by Vue is point-to-point binding data.

Vue's data binding has only two steps, Compile=>link.

I've been thinking about what Vue was doing to listen to the user's modifications to the model, until I found out that the data in Vue had set and get properties for each property.

In peacetime, we create an object and modify its properties, which is the case:

    var obj =     {        val:A. = +;    Console.log (obj.val)//

There is no problem, but if you want to monitor, when I modify the properties of this object, to do something, what would you do?

This is going to use the getter and setter.

Let's say I'm going to add a Name property to a code farm object, and every time I update the Name property, I'm going to do something, and we can do this:

    varCoder =function() {        varthat = This; return{get name () {if(that.name) {returnThat.name}return' You haven't got a name '}, set name (val) {Console.log (' You have the name fixed ' +val) that.name=Val}} }    varIsme =Newcoder () Console.log (isme.name) isme.name= ' Week of God 'Console.log (isme.name) console.log (isme)

Output:

You'll find that this object is the same as the data object in the top Vue, with the same effect as the get and set properties.

It is interesting to analyze the above code in one step.

Let's start by creating an object literal:

var coder = function () {...}

To cache this again:

var = this;

Next is the most important, we return an object to go back:

{

Get name () {...},

Set Name (val) {...}

}

As the name implies, get is the value, set is the assignment, normally, we take the value and assignment is in the way of Obj.prop, but there is a problem, how do I know the value of the object changed? So it's my turn to set up.

You can understand get and set as function, of course, just so you can understand, this is completely different two things.

Next create an example of a code farm, Isme; At this point, Isme has no Name property, and when we call Isme.name, we go to get name () {...} , first determine if Isme has a name attribute, the answer is no, then add a Name property and assign it a value: "You have not named"; if there is a name attribute, it returns the Name property.

See here you must know how get used, yes, you can think of get as a value function, the return value of the function is the value it gets.

What I feel is more important is the Set property, when I assign a value to the instance:

Isme.name= "Zhou Shen"

At this point, the set name (val) {...} is entered. The parameter val is the value I assign to the Name property, and in this function I can do a lot of things, like two-way binding! Because each change of this value must go through set, the other way is not change it, the equivalent of a universal listener.

There is another way to implement this function.

The ES5 object prototype has two new properties, __definegetter__ and __definesetter__, that are specifically used to bind objects to get and set. You can write like this:

    varCoder =function() {} coder.prototype.__definegetter__ (' Name ',function() {        if( This. Name) {            return  This. Name}Else{            return' You haven't got a name '}}) coder.prototype.__definesetter__ (' Name ',function(val) { This. Name =val}) varIsme =Newcoder () Console.log (isme.name) isme.name= ' Week of God 'Console.log (isme.name) console.log (isme)

The effect is the same, it is recommended to use the following way, because it is written in the prototype, so you can inherit and reuse, recently want to write a little frame, only to find that knowledge is not enough, let's refuel together!

The getter and setter thought caused by Vue