On vue realization of the principle of two-way binding and simple

Vue seen long before some of the principles, the principle of two-way binding which also have a certain degree of understanding, only recently the use of vue on the project, decided to try to understand this principle achieved under vue, so here's a two-way tie for vue On the fixed principle, and do a simple realization.

On the principle of two-way binding vue

Vue two-way data binding is hijacked by data, combined publish - subscribe model way to achieve.

Let vue through a simple example to see objects on the vue initialization data in the end what it is.

var VM = new new Vue ({ 
    Data: { // way binding data object 
        obj: { 
            A: . 1 
        } 
    }, 
    Created: function () { // Initialize event 
        the console.log ( the this .OBJ); 
    } 
});

By printing the console, we can see the properties of a two get and set methods corresponding to the generation of these two methods is Object.defineProperty () method to decide. So that we can know, vue is accomplished by Object.defineProperty () method of data hijacking, and then get and set methods which do the appropriate action to achieve the two-way data binding.

Object.defineProperty () method of the get and set properties

Object.defineProperty () method can be used to control a specific object of some operations, such as read and write access, whether the like can be enumerated here only two simple analysis described get and set its attributes corresponding to these two attributes corresponding to attributes value is a function. To learn more about the properties of this method, you can refer MDN documentation: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty .

If you develop a Java application, it is easy to think of get and set methods are used to get and set the property values ​​of the object, while the addition of some of the specific code in the get and set methods to operate in property values, and here, in fact, the situation is no different. As the name suggests, the event function is to get in to read the property value of the object when the trigger event function, set method ah property value is set when the object is triggered.

Simple implementation

To achieve the two-way binding is mvvm need some additional operations, such as publishing - applications and operating dom subscription model, etc., here simply for data hijacking of them, do not do depth discussions on other principles.

var Person = {}; // define a Person object 
var name = ''; // define a name attribute 
// to name Person object attribute get and set binding event function 
Object.defineProperty (Person, 'name' , { 
  SET: function (value) { 
    name = value; 
    the console.log ( 'I love the' + value); 
  }, 
  GET: function () {
     return 'I love' + name; 
  } 
}) 
 
person.name = ' yanggb ';   // person I love yanggb 
console.log (person.name);   // I love yanggb

This allows us to set and read the name attribute in the Person object time to do some additional enhancement operation, vue is based on this approach to the hijacking of the data.

 

"I still like you, like a rain cloud in the wind, do not ask played."