前言:最近团队需要做一个分享,脚进脑子,不知如何分享。最后想着之前一直想研究一下 vue 源码,今天刚好 “借此机会” 研究一下。
网上研究vue数据绑定的文章已经非常多了,但是自己写一遍,敲一遍demo和看别人的文章是完全不同的,so……搬运工来了
目前数据绑定主要有以下三种实现方式:
1. 脏值检查(angular.js) 轮询检测数据变化
DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
- XHR响应事件 ( $http )
- 浏览器Location变更事件 ( $location )
- Timer事件( $timeout,$interval )
- 执行 $digest() 或 $apply()
2、Object.defineProperty劫持对象的get、set,从而实现对数据的监控。 (vue)
Object.defineProperty的优点
- “脏值检测”——数据发生变更后,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生了改变,有变化进行处理,可能进一步引发其他数据的改变,所以这个过程可能会循环几次,一直到不再有数据变化发生后,将变更的数据发送到视图,更新页面展现
- Object.defineproperty() 监控对数据的操作,可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。
Object.defineProperty的用法
rush:js;">
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
rush:js;">
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]);
});
}
rush:js;">
function defineReactive(data,val) {
Object.defineProperty(data,{
enumerable: true,// 可枚举
configurable: false,// 不能再define
get: function() {
return val;
},
set: function(newVal) {
console.log('监听到值变化了 ',val,' 变成 ',newVal);
val = newVal;
}
});
}
2. 维护一个数组
rush:js;">
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,val) {
Object.defineProperty(data,{
……
set: function(newVal) {
if (val === newVal) return;
console.log('监听到值变化了 ',newVal);
val = newVal;
dep.notify(val); // 通知所有订阅者
}
});
}
3. compile
rush:js;">
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
});
}
},
参考链接:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!
原文地址:https://www.jb51.cc/vue/42423.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。