详解Vue双向数据绑定原理解析

前端之家收集整理的这篇文章主要介绍了详解Vue双向数据绑定原理解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基本原理

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

思路整理

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

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

流程图如下:

分布实现

1. MVVM.js

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

observe(data,this);

this.$compile = new Compile(options.el || document.body,this)
}

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

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

2. Observer.js

Object.defineProperty(data,{
enumerable: true,// 可枚举
configurable: false,// 不能再define
get: function() {
if (Dep.target) {
dep.depend();
}
return val;
},set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
// 新的值是object的话,进行监听
childObj = observe(newVal);
// 通知订阅
dep.notify();
}
});
}

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

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

3. Compile.js

Compile做了两件事情:

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

解析流程如下:

1.将DOM转成文档碎片fragment,提升查询效率 2.遍历所有元素节点及其子节点,调用对应的指令渲染函数渲染,并调用对应的指令更新函数进行绑定 3.将fragment添加回真实的DOM中

遍历元素

编译元素节点

var attrName = attr.name; // v-html if (me.isDirective(attrName)) { var exp = attr.value; // content var dir = attrName.substring(2); // 事件指令 if (me.isEventDirective(dir)) { compileUtil.eventHandler(node,me.$vm,exp,dir); // 普通指令 } else { compileUtil[dir] && compileUtil[dir](node,exp); } node.removeAttribute(attrName); } }); }

指令处理与更新函数

添加订阅者 new Watcher(vm,function(value,oldValue) { // 属性变化的视图更新函数 updaterFn && updaterFn(node,value,oldValue); }); },}

var Updater = {
htmlUpdater: function(node,value) {
node.innerHTML = typeof value == 'undefined' ? '' : value;
}
}

4. Watcher.js

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

1.自身实例化时在属性订阅器集合dep里添加自己 2.自身需有update方法 3.调用dep.notice时,watcher调用自身的update,触发Compile中定义的回调

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

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

小结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章