前言：最近团队需要做一个分享，脚进脑子，不知如何分享。最后想着之前一直想研究一下 vue 源码，今天刚好 “借此机会” 研究一下。
网上研究vue数据绑定的文章已经非常多了，但是自己写一遍，敲一遍demo和看别人的文章是完全不同的，so……搬运工来了
目前数据绑定主要有以下三种实现方式：
1. 脏值检查（angular.js） 轮询检测数据变化
dom事件，譬如用户输入文本，点击按钮等。( ng-click )
2、object.defineproperty劫持对象的get、set，从而实现对数据的监控。 （vue）
3、发布／订阅者模式实现数据与视图的自动同步
object.defineproperty的优点
object.defineproperty的用法
我要评论
var a = {};
object.defineproperty(a, "b", {
set: function (newvalue) {
console.log("我被赋值了！" + newvalue);
},
get: function () {
console.log("我被取值了！");
return 2
}
})
a.b = 3; //我被赋值了！
console.log(a.b); //我被取值了! //打印 2
由上面的例子看出，object.defineproperty 传人3个参数
第一个： a对象
第二个： a对象里面的b属性
第三个： 属性比较多，列举有用的 value，set，get，configurable
数据绑定原理：
1、实现一个数据监听器observer，对数据对象的所有属性进行监听，如有变动则拿到最新值并通知 dep数组
2、实现一个指令解析器compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据
3、实现一个dep数组 ，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，更新视图
1. 实现observer
var data = {name: 'beidan'};
observe(data);
data.name = 'test'; // 监听到值变化了 beidan 变成 test
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
// 取出所有属性遍历
object.keys(data).foreach(function(key) {
definereactive(data, key, data[key]);
});
}
function definereactive(data, key, val) {
object.defineproperty(data, key, {
enumerable: true, // 可枚举
configurable: false, // 不能再define
get: function() {
return val;
},
set: function(newval) {
console.log('监听到值变化了 ', val, ' 变成 ', newval);
val = newval;
}
});
}
2. 维护一个数组
function dep() {
this.subs = [];
}
dep.prototype = {
addsub: function (sub) {
this.subs.push(sub);
},
notify: function (val) {
this.subs.foreach(function (sub) {
sub.update(val)
});
}
};
function definereactive(data, key, val) {
object.defineproperty(data, key, {
……
set: function(newval) {
if (val === newval) return;
console.log('监听到值变化了 ', val, ' 变成 ', newval);
val = newval;
dep.notify(val); // 通知所有订阅者
}
});
}
3. compile
bindtext: function () {
var textdoms = this.el.queryselectorall('[v-text]'),
bindtext,_context = this;
for (var i = 0; i < textdoms.length; i++) {
bindtext = textdoms[i].getattribute('v-text');
textdoms[i].innerhtml = this.data[bindtext];
var val = textdoms[i]
var up = function (text) {
val.innertext = text
}
_context.dep.addsub({
value: textdoms[i],
update: up
});
}
},
最后，附上源码 github
参考链接：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论