Vue双向数据绑定原理

呆呆流云    2018-9-1

基本原理

Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调。

思路整理

要实现mvvm的双向绑定,需要实现如下几点:

  1. 实现一个数据监听器Observer,能够对对象的所有属性进行监听,发生变化时拿到最新值通知订阅者
  2. 实现一个解析器Compile,对每个子元素节点的指令进行扫描和解析,根据模板指令替换数据,初始化视图以及绑定相应的回调函数;
  3. 实现一个Watcher,作为Observer和Compile的桥梁,能够订阅属性变动的通知,执行指令绑定的回调函数,更新视图
  4. mvvm的入口,整合以上三者

流程图如下:

分布实现

1. MVVM.js

functionMVVM(options){this.$options = options || {};vardata =this._data =this.$options.data;varme =this;// 数据代理// 实现 vm.xxx -> vm._data.xxxObject.keys(data).forEach(function(key){
        me._proxyData(key);
    });// 代理计算属性// 同样通过Object.defineProperty进行劫持this._initComputed();

    observe(data,this);this.$compile =newCompile(options.el ||document.body,this)
}

MVVM.prototype = {
    $watch:function(key, cb, options){newWatcher(this, key, cb);
    }
}

MVVM入口文件,整合Observer/Compile/Watcher三者,达到数据变化->更新视图;视图变化->数据变更的双向绑定效果。(结合钩子函数,理解Vue生命周期中各个阶段的作用)

2. Observer.js

functionObserver(data){Object.keys(data).forEach(function(){
        defineReactive(data, key, data[key]);
    });
}functiondefineReactive(data, key, val){vardep =newDep();varchildObj = observe(val);Object.defineProperty(data, key, {
        enumerable:true,// 可枚举configurable:false,// 不能再defineget:function(){if(Dep.target) {
                dep.depend();
            }returnval;
        },
        set:function(newVal){if(newVal === val) {return;
            }
            val = newVal;// 新的值是object的话,进行监听childObj = observe(newVal);// 通知订阅者dep.notify();
        }
    });
}

对需要监测的对象的每个属性进行递归遍历,通过Object.defineProperty设置setter和getter。当设置新的属性值时,触发相应的setter,通知订阅者。

function Dep() {
    this.id = uid++;
    this.subs = [];
}
Dep.prototype= {
    addSub: function(sub){
        this.subs.push(sub);
    },
    depend: function() {
        Dep.target.addDep(this);
    },
    notify: function() {
        this.subs.forEach(function(sub){sub.update();
        });
    }
};

订阅者模式,每个属性维护一个Dep,记录自己的订阅者(即watcher),notify通知每个订阅者执行相应的update方法,更新视图。

3. Compile.js

Compile做了两件事情:

  1. 解析模板指令,替换变量,初始化渲染视图;
  2. 生成一个watcher,注册回调函数,添加监听数据的订阅者,数据变动时,更新视图

解析流程如下:

  1. 将DOM转成文档碎片fragment,提升查询效率
  2. 遍历所有元素节点及其子节点,调用对应的指令渲染函数渲染,并调用对应的指令更新函数进行绑定
  3. 将fragment添加回真实的DOM中
遍历元素
functioncompileElement(el){varchildNodes = el.childNodes,
        me =this;
    [].slice.call(childNodes).forEach(function(node){vartext = node.textContent;varreg =/\{\{(.*)\}\}/;// 解析元素节点if(me.isElementNode(node)) {
            me.compile(node);// {{}}替换变量}elseif(me.isTextNode(node) && reg.test(text)) {
            me.compileText(node,RegExp.$1);
        }// 递归遍历子节点if(node.childNodes && node.childNodes.length) {
            me.compileElement(node);
        }
    });
}
编译元素节点
compile:function(node){varnodeAttrs = node.attributes,
        me = this;
    [].slice.call(nodeAttrs).forEach(function(attr){// 指令以v-xxx命名// <span v-html="content"></span>varattrName = attr.name;// v-htmlif(me.isDirective(attrName)) {varexp = attr.value;// contentvardir = attrName.substring(2);// 事件指令if(me.isEventDirective(dir)) {
                compileUtil.eventHandler(node, me.$vm, exp, dir);// 普通指令}else{
                compileUtil[dir] && compileUtil[dir](node, me.$vm, exp);
            }
            node.removeAttribute(attrName);
        }
    });
}
指令处理与更新函数
varcompileUtil = {
    html:function(node, vm, exp){this.bind(node, vm, exp,'html');
    },
    
    bind:function(node, vm, exp, dir){varupdaterFn = updater[dir +'Updater'];// 第一次初始化视图updaterFn && updaterFn(node,this._getVMVal(vm, exp));// 实例化Watcher,添加订阅者newWatcher(vm, exp,function(value, oldValue){// 属性变化的视图更新函数updaterFn && updaterFn(node, value, oldValue);
        });
    },
}varUpdater = {
    htmlUpdater:function(node, value){
        node.innerHTML =typeofvalue =='undefined'?'': value;
    }
}

4. Watcher.js

Watcher作为Observer与Compile之间通信的桥梁,属性变化的订阅者,做了如下的事情:

  1. 自身实例化时在属性订阅器集合dep里添加自己
  2. 自身需有update方法
  3. 调用dep.notice时,watcher调用自身的update ,触发Compile中定义的回调
functionWatcher(vm, expOrFn, cb){this.cb = cb;this.vm = vm;this.expOrFn = expOrFn;this.value=this.get();
}

Watcher.prototype = {
    update: function() {this.run();
    },
    run: function() {varvalue=this.get();varoldVal =this.value;if(value!== oldVal) {this.value=value;this.cb.call(this.vm,value, oldVal);
        }
    },get: function() {
        Dep.target =this;varvalue=this.getter.call(this.vm,this.vm);
        Dep.target =null;returnvalue;
    }
};

这里需要注意的点是,实例化watcher的时候,调用get方法,通过Dep.target = curInstance,强行触发获属性值的getter方法,在属性的订阅器中添加当前watcher实例。

小结

双向绑定的原理很简单,通过数据劫持,当设置新属性值的时候通过订阅者更新视图;编译指令,替换变量,同时绑定更新函数到订阅者;对应事件绑定调用addEventListener进行监听。






暗色背景
手机扫码阅读本页