vue vue-depth learning two-way binding principle

vue way binding principles to consult general, is to add a getter / seter properties for each property in the field of data in order to track changes in data, and perform this operation, is dependent Object.defineProperty method of js Object.defineProperty is ES5 one can not shim feature, which is not the reason Vue IE8 and earlier browsers support.

Here to tell us about Object.defineproperty ()

Object.defineProperty requires three parameters (object, propName, descriptor)

1 object Object => Who plus
2 propName attribute name => name of the property to be added [type: String]
3 descriptor property description => add this property, what kind of characteristics [Type: Object]

It is a characteristic of a total of six

value: value of the property
writable: whether the value can be overridden. true | false
enumerable: whether the target property can be enumerated. true | false
configurable: whether the target attribute can be deleted or whether you can modify the characteristics of true again | false
set: Set target attribute value method
get: objective method for obtaining property values

First, let's introduce the first value

a = the let {}; 
    Object.defineProperty (a, 'name' , { 
      value: "Hello" 
    }) 
    the console.log (a); 
// print the results {name: "Hello"} 

// If a per se has a name attribute use Object.defineproperty to redefine what will happen

A = the let { 
    name: 'initial value' 
}; 
    Object.defineProperty (A, 'name' , { 
      value: "Hello" 
    }) 
    the console.log (A);

// print the results {name: "Hello"}

This method is to add a property to the current object and the property value of 'Hello', there can only be read if the object had this property that overrides this attribute worth mentioning is given a property in this way when can not be changed

a.name = 'I want you to re-assignment' ;
 // This code will throw an Error in created hook: "TypeError: Can not assign to read only property 'name' of object '# <Object>'"

Why, the reason is not defined writable characteristics should be

The second writable

A = the let {}; 
    Object.defineProperty (A, 'name' , { 
      value: "Hello" , 
      Writable: to true 
    }) 
    a.name = "I want you to re-assign" ; 
    the console.log (A); 
/ / print the results {name: "I want you to re-assign"}

This feature is to show whether the name attribute can be written

The third enumerable

It indicates that the attribute is defined attributes whether may be for-in loop or Object.keys () to retrieve

A = the let {}; 
    Object.defineProperty (A, "name" , { 
      Writable: to true , 
      Enumerable: to true , 
      value: 'NiHao' 
    }); 
    the console.log (Object.values (A)); // print the values [ "NiHao"] 

the let A = {}; 
    Object.defineProperty (A, "name" , { 
      Writable: to true , 
      Enumerable: to false , 
      value: 'NiHao' 
    }); 
    the console.log (Object.values (A)); / / Print value [] attribute name is not defined retrieved

The fourth configurable

This attribute indicates whether you can modify the properties again

A = the let { 
      a_attr: ". 11" 
    }; 
    Object.defineProperty (A, "name" , { 
      Writable: to false , // then define the characteristics of 
      value: "NiHao" , 
      Configurable: to false // not modify properties 
    }); 
    
     Object .defineProperty (A, "name" , { 
      value: "NiHao" , 
      Writable: to true // to allow writing characteristic set to true 
    }); 
    a.name = "180 [" // write error value Error in created hook: "TypeError: Property of Can not the redefine: name" 
    console.log (a.name)

The fifth get set

This is the basis for the realization of the principle of two-way binding vue these two properties indicate properties are being written to or read execution method and is synchronized

A = the let {}; 
    Object.defineProperty (A, "name" , { 
      GET () { 
        the console.log ( "I want to be read" )
         return 'value returned read' 
      }, 
      SET (Val) { 
        console.log ( "I want to be written is the value of my written:" + Val) 
      } 
    }); 
    console.log (a.name); // get method to perform printing (I want to be read) and (read return value) 
    a.name = "I want to write you" // set method was executed print (I want to be written is the value of my writing: I want to write you)

vue vue-depth learning two-way binding principle

Guess you like