vue的数据双向绑定的小例子：
。html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf->
<title>vue数据双向绑定原理</title>
</head>
<body>
<h1 id="name"><<<<name>>>>>></h1>
</body>
<script src="testvuejs/observer.js"></script>
<script src="testvuejs/watcher.js"></script>
<script src="testvuejs/index.js"></script>
<script type="text/javascript">
var ele = document.querySelector('#name');
var selfVue = new SelfVue({
name: 'hello world'
}, ele, 'name');
window.setTimeout(function () {
console.log('name值改变了');
selfVue.name = 'canfoo';
}, );
</script>
</html>
index.js
function SelfVue (data, el, exp) {
var self = this;
this.data = data;
//把data里的key直接绑定到this对象上
Object.keys(data).forEach(function(key) {
self.proxyKeys(key);
});
//对data的每一层级的属性进行监听，如果变化执行notify
observe(data);
// 初始化模板数据的值
el.innerHTML = this.data[exp];
new Watcher(this, exp, function (value) {
el.innerHTML = value;
});
return this;
}
SelfVue.prototype = {
proxyKeys: function (key) {
Object.defineProperty(this, key, {
enumerable: false,
configurable: true,
get: ()=> {
return this.data[key];
},
set: (newVal)=> {
this.data[key] = newVal;
}
});
}
}
observer.js
function Observer(data) {
this.data = data;
this.walk(data);
}
Observer.prototype = {
walk: function(data) {
var self = this;
Object.keys(data).forEach(function(key) {
self.defineReactive(data, key, data[key]);
});
},
defineReactive: function(data, key, val) {
var dep = new Dep();
//对二级三级子属性...进行监听尽
observe(val);
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function() {
if (Dep.target) {
dep.addSub(Dep.target);
}
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify();
}
});
}
};
function observe(value, vm) {
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value);
};
function Dep () {
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
Dep.target = null;
watcher.js
function Watcher(vm, exp, cb) {
this.cb = cb;
this.vm = vm;
this.exp = exp;
//当new一个对象的时候，立即执行get方法，Dep的target为Watcher自己
this.value = this.get(); // 将自己添加到订阅器的操作
}
Watcher.prototype = {
update: function() {
this.run();
},
run: function() {
var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value);
}
},
get: function() {
Dep.target = this; // 缓存自己
var value = this.vm.data[this.exp] // this.vm.data[this.exp]:强制执行监听器里的get函数，使自己（Watcher {cb: ƒ, vm: SelfVue, exp: "name"}）被添加上
Dep.target = null; // 释放自己
return value;
}
};
原理：当new vue后，将data属性直接给vm添加上，将属性的每一级进行set get 当set新值时通知notify函数。执行 new watcher ，强制执行data的get 使watch被添加上。
当data set新值时，触发notify函数，使所有watcher都执行update，watcher的update时，本地的value是旧值，取新值，回调函数更新view。