observer: 其主要目的就是对每条数据进行观察和劫持。我们可以在一下源码中可以看到相应的操作:
function Observer(obj) {
this.data = obj;//暂存data数据,方便以后的操作
this.walk(obj);//对所有属性进行遍历
}
Observer.prototype = {
walk: function(obj) {
var that = this;//暂存实例
Object.keys(obj).forEach(function(key) { //对data里所有的属性名进行遍历
that.convert(key, obj[key]);
});
},
//为每个属性增加响应式
convert: function(key, val) {
//响应式=> defineReactive
this.defineReactive(this.data, key, val);
},
defineReactive: function(obj, key, val) {
//为data中所有层次的属性都创建一个dep实例
var dep = new Dep();
//递归遍历data中所有层次的属性
var childObj = observe(obj);
//(Object.defineProperty数据劫持),新增get和set方法
Object.defineProperty(obj, key, {//obj为此对象,key为新增或修改的属性,后面的{}内的描述就是属性描述
configurable: false, // 不可配置
enumerable: true, // 可枚举
get: function() {
//判断当前Dep.target的watcher是否存在
if (Dep.target) {//Dep.target上存放这当前需要操作的Watcher实例,调用depend会调用该Watcher实例的方法
dep.depend();
}
return val;
},
set: function(newVal) {
if (newVal === val) {//如果新增数据和原有数据一样就终止运行
return;
}
//反之,就让observe对新增的数据进行劫持
val = newVal;//新值覆盖原有的值
childObj = observe(newVal);
dep.notify();//Dep是Observer与Watcher的纽带,当数据变化时,会被Observer观察到,然后由Dep通知到Watcher
}
});
}
};
//新建队列,重新观察
function observe(val, vm) {
//判断val是否存在 或者val数据类型是否为对象
if (!val || typeof val !== 'object') {
return;
}
return new Observer(val);
};