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

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

基本原理

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

思路整理

要实现mvvm的双向绑定，需要实现如下几点：

1.实现一个数据监听器Observer，能够对对象的所有属性进行监听，发生变化时拿到最新值通知订阅者

2.实现一个解析器Compile，对每个子元素节点的指令进行扫描和解析，根据模板指令替换数据，初始化视图以及绑定相应的回调函数；

3.实现一个Watcher，作为Observer和Compile的桥梁，能够订阅属性变动的通知，执行指令绑定的回调函数，更新视图

4.mvvm的入口，整合以上三者

流程图如下：

分布实现

1. MVVM.js

function MVVM(options) {

this.$options = options || {};

var data = this._data = this.$options.data;

var me = this;

// 数据代理

// 实现 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

function Observer(data) {

Object.keys(data).forEach(function() {

defineReactive(data, key, data[key]);

});

}

function defineReactive (data, key, val) {

var dep = new Dep();

var childObj = observe(val);

Object.defineProperty(data, key, {

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，通知订阅者。

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中

遍历元素

function compileElement (el) {

var childNodes = el.childNodes,

me = this;

[].slice.call(childNodes).forEach(function(node) {

var text = node.textContent;

var reg = /\{\{(.*)\}\}/;

// 解析元素节点

if (me.isElementNode(node)) {

me.compile(node);

// {{}}替换变量

} else if (me.isTextNode(node) && reg.test(text)) {

me.compileText(node, RegExp.$1);

}

// 递归遍历子节点

if (node.childNodes && node.childNodes.length) {

me.compileElement(node);

}

});

}

编译元素节点

compile: function(node) {

var nodeAttrs = node.attributes,

me = this;

[].slice.call(nodeAttrs).forEach(function(attr) {

// 指令以v-xxx命名

//

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, me.$vm, exp);

}

node.removeAttribute(attrName);

}

});

}

指令处理与更新函数

var compileUtil = {

html: function(node, vm, exp) {

this.bind(node, vm, exp, 'html');

},

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

var updaterFn = updater[dir + 'Updater'];

// 第一次初始化视图

updaterFn && updaterFn(node, this._getVMVal(vm, exp));

// 实例化Watcher，添加订阅者

new Watcher(vm, exp, 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之间通信的桥梁，属性变化的订阅者，做了如mRjiPRE下的事情：

1.自身实例化时在属性订阅器集合dep里添加自己

2.自身需有update方法

3.调用dep.notice时，watcher调用自身的update ,触发Compile中定义的回调

function Watcher(vm, expmRjiPREOrFn, cb) {

this.cb = cb;

this.vm = vm;

this.expOrFn = expOrFn;

this.value = this.get();

}

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, value, 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进行监听。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。