Talk about the vue.js of Getter and setter _javascript skills

Cause

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

Each of its properties have two corresponding get and set methods, I think this is superfluous, so go online check the Vue two-way binding principle of implementation, found that it and angular.js two-way binding implementation of the principle is completely different, angular is used in the data dirty detection, when the model changes, will detect whether all views bound related data, and then change the view. The Publish subscription mode that Vue uses is the point-to-point binding data.

Vue data binding is only two steps compile=>link .

I have been thinking, Vue is through what to monitor the user's changes to model, until I found Vue data, each attribute has set and get attributes, I just understand come.

In peacetime, we create an object and modify its properties to be like this:

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

There's no problem, but if you're going to monitor, when I change the properties of this object, I'm going to do something, what would you do?

Related thinking

This is going to be used getter and setter .

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

 var coder = function () {
  var = this;
  return {get
   name () {
    if (that.name) {
     "That.name
    }
    "-"You have not named"
   },
   set name (val) {
    Console.log (' You put 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 and the object in the top Vue data are printed in the same way, owning get and set attributes.

Let's take a step-by-step analysis of the code above, which is interesting.

We first create an object literal:

var coder = function () {...}

And then the this cache:

var that = this;

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

{Get

name () {...},

set name (val) {...}}

}

As the name suggests, get is a value, set is assigned, normally, we value and assignment is obj.prop the way, but there is a problem, how do I know the value of the object changed? So it's your turn to set the stage.

You can take get set it and understand function it as, of course, just so to understand that it is totally different from the two things.

Next, create a code farmer's instance, isme; At this time, Isme is not a name property, when we call isMe.name , we will enter into get name(){...} , first to determine whether the isme have name attributes, the answer is no, then add a name property and assign it a value: " You have not named "; if there is a name property, then return the name property.

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

I feel more important is the set attribute when I assign a value to the instance:

Isme.name= "Zhou Shen"

At this point, the parameter set name(val){...}； val is the value I assigned to the attribute, and name in this function, I can do a lot of things, such as bidirectional binding! Because every change in this value has to go through set, the other way is not to change it, the equivalent of a universal listener.

There is another way to achieve this.

The ES5 object prototype has two new properties and is __defineGetter__ __defineSetter__ designed to bind the object to get and set.

You can write like this:

 var coder = function () {
 }
 coder.prototype.__definegetter__ (' name ', function () {
  if (this.name) {
   return this.name
  }else{"
   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 effect is the same, it is recommended to use the following method, because it is written on the prototype, so you can inherit and reuse.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.