14. Vue 2.0 two-way binding principle

let obj = {};

let name = "xx" ; Object .defineProperty(obj, "n" , { get () { console .log( "Read" , name); return name; }, set ( newName ) { console .log( "Settings" , newName); value = newName; } }); //Trigger the get function, the return value of get is the property value console .log(obj.n); //Trigger the set function, the value of value becomes xxxx, the property value has not changed obj.n = "xxxx" ; console .log(obj.n);

Copy code

function observe ( data ) { if (data && typeof data === "object" ){ Object .keys(data).forEach( ( key )=> { defineReactive(data, key, data[key]); }) } }

function defineReactive ( data,key,val ) { //Recursively, monitor sub-objects observe(val) Object .defineProperty(data, key, { enumerable : true , configurable : false , get : function () { return val; }, set : function ( value ) { val = value; }, });

} Copy code

//Dep function Dep () { this .subs = []; } Dep.prototype = { addSub : function ( sub ) { this .subs.push(sub); }, notify : function () { this .subs.forEach( function ( sub ) { sub.update(); }); }, };

Copy code

function defineReactive ( data,key,val ) { var dep = new Dep()

//Recursively, listen to sub-objects observe(val) Object .defineProperty(data, key, { enumerable : true , configurable : false , get : function () { return val; }, set : function ( value ) { dep.notify() }, });

} Copy code

//Watcher function Watcher ( vm, exp, cb ) { this .cb = cb; this .$vm = vm; this .exp = exp; //In order to trigger the getter of the property, add yourself to the dep, combined with Observer Easier to understand this .value = this .get(); //add yourself to the subscriber operation } Watcher.prototype = { update : function () { this .run(); //Receive notification of property value changes }, run : function () { var value = this .get(); Get the latest value var oldVal = this .value; //Speaking of triggering the set function before, the attribute value has not changed if (value !== oldVal) { this .value = value; this .cb.call( this .$vm, value, oldVal); //Execute the callback bound in Compile and update the view } }, get : function () { Dep.target = this ; //Point the current subscriber to yourself, cache var value = this .$vm[ this .exp]; //Force the listener to trigger and add yourself to the attribute subscriber Dep.target = null ; //After adding, reset and release return value; }, };

Copy code

function defineReactive ( data, key, val ) { var dep = new Dep() observe(val); //monitor sub-property Object .defineProperty(data, key, { .... get : function () { //Because you need to add a watcher in the closure, you can define a global target attribute in Dep, temporarily store the watcher, and remove it after adding Dep.target && dep.addDep(Dep.target); return val; }, .... });

}

Copy code

<div id= "name" ></div> < script > function Vue ( data, el, exp ) { this .data = data; observe(data); el.innerHTML = this .data[exp]; //initialize the value of the template data new Watcher( this , exp, function ( value ) { el.innerHTML = value; }); return this ; } var ele = document .querySelector( "#name" ); var vue = new Vue( { name : "hello world" , }, ele, "name" ); setInterval ( function () { vue.data.name = "chuchur" + new Date () * 1 ; }, 1000 ); </Script > copy the code

function Vue ( options ) {

this .$options = options || {}; this .data = this .$options.data; //Property proxy, implement vm.xxx -> vm.data.xxx var self = this ; Object .keys( this .data ).forEach( function ( key ) { //this.data ==>this self.proxy(key); //bind proxy properties

}); observe( this .data, this ); el.innerHTML = this .data[exp]; //Initialize the value of the template data new Watcher( this , exp, function ( value ) {

el.innerHTML = value;

}); return this ;

}

//Also use the defineProperty() method Vue.prototype = {

proxy : function ( key ) { var self = this ; Object .defineProperty( this , key, { enumerable : false , configurable : true , get : function proxyGetter () { return self.data[key]; }, set : function proxySetter ( newVal ) { self.data[key] = newVal; } }); }

}

Copy code

Compile.prototype = {

...... isDirective : function ( attr ) { return attr.indexOf( 'v-' ) == 0 ; },

isEventDirective : function ( dir ) { return dir.indexOf( 'on:' ) === 0 ; },

//Process v-instruction compile : function ( node ) {

var nodeAttrs = node.attributes, self = this ; [].slice.call(nodeAttrs).forEach( function ( attr ) { //Rule: the command is named v-xxx //such as the command in <span v-text="content"></span> is v-text var attrName = attr.name; //v-text if (self.isDirective(attrName)) { var exp = attr.value; //content var dir = attrName.substring( 2 ); //text if (self.isEventDirective (dir)) { //Event instruction, such as v-on:click self.compileEvent(node, self.$vm, exp, dir); } else { //Ordinary commands such as: v-model, v-html, currently only deal with v-model self.compileModel(node, self.$vm, exp, dir); } //After processing, kill v-on:, v-model and other element attributes node.removeAttribute(attrName) } });

},

compileEvent : function ( node, vm, exp, dir ) {

var eventType = dir.split( ':' )[ 1 ]; var cb = vm.$options.methods && vm.$options.methods[exp]; if (eventType && cb) { node.addEventListener(eventType, cb.bind(vm), false ); }

},

compileModel : function ( node, vm, exp, dir ) {

var self = this ; var val = this .$vm[exp]; this .updaterModel(node, val); new Watcher( this .$vm, exp, function ( value ) { self.updaterModel(node, value); }); node.addEventListener( 'input' , function ( e ) { var newValue = e.target.value; if (val === newValue) { return ; } self.$vm[exp] = newValue; val = newValue; });

},

updaterModel : function ( node, value, oldValue ) { node.value = typeof value == 'undefined' ? '' : value; },

}

Copy code