Observer在MVVM中实现劫持的原理
在Observer源码部分主要有三个部分:Observer、Dep、Watcher。
实现observer
我们将要observe的对象,通过递归,将它所有的属性,包括子属性的属性,都给加上set和get。这样的话,给这个对象的某个属性赋值,就会触发set。
export default class Observer{
constructor(value) {
this.value = value
this.walk(value)
}
//递归。。让每个字属性可以observe
walk(value){
Object.keys(value).forEach(key=>this.convert(key,value[key]))
}
convert(key, val){
defineReactive(this.value, key, val)
}
}
export function defineReactive (obj, key, val) {
var childOb = observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: ()=>val,
set:newVal=> {
childOb = observe(newVal)//如果新赋值的值是个复杂类型。再递归它,加上set/get。。
}
})
}
export function observe (value, vm) {
if (!value || typeof value !== 'object') {
return
}
return new Observer(value)
}
给每个属性(包括子属性)都加上get/set 这样的话 这个对象 有任何赋值就会触发set方法
然后再写一个订阅器
export default class Dep {
constructor() {
this.subs = []
}
addSub(sub){
this.subs.push(sub)
}
notify(){
this.subs.forEach(sub=>sub.update())
}
}
所以,每次set函数调用的时候应该触发notify
export function defineReactive (obj, key, val) {
var dep = new Dep()
var childOb = observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: ()=>val,
set:newVal=> {
var value = val
if (newVal === value) {
return
}
val = newVal
childOb = observe(newVal)
dep.notify()
}
})
}
订阅者就是Watcher。一旦 dep.notify()就遍历订阅者,也就是Watcher,并调用他的update()方法
function Observer(data) {
//在Observer实例上暂存data
this.data = data;
this.walk(data);
}
Observer.prototype = {
walk: function(data) {
var me = this;
//对data里所有的属性名进行遍历
Object.keys(data).forEach(function(key) {
me.convert(key, data[key]);
});
},
convert: function(key, val) {
//为每个属性增加响应式
this.defineReactive(this.data, key, val);
},
defineReactive: function(data, key, val) {
//为data中所有层次的属性都创建一个dep实例
var dep = new Dep();
//递归遍历data中所有层次的属性
var childObj = observe(val);
//为原有属性新增get和set方法(数据劫持)
Object.defineProperty(data, key, {
enumerable: true, // 可枚举
configurable: false, // 不能再define
get: function() {
//判断当前Dep.target的watcher是否存在
if (Dep.target) {//当模版初始化的时候会赋值watcher实例到target上
//调用dep的depend方法
dep.depend();
}
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
// 新的值是object的话,进行监听
childObj = observe(newVal);
// 通知订阅者
dep.notify();
}
});
}
};
function observe(value, vm) {
//判断value是否存在或者value的数据类型是否为object(递归的终止条件)
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value);
};
var uid = 0;
function Dep() {
//没创建一个dep都会给这个dep增加一个独立的标识
this.id = uid++;
this.subs = []; //watcher
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
//调用watcher实例的addDep方法
depend: function() {
//Dep.target此时是watcher的实例
//this此时是当前dep的实例
Dep.target.addDep(this);
},
removeSub: function(sub) {
var index = this.subs.indexOf(sub);
if (index != -1) {
this.subs.splice(index, 1);
}
},
//通知所有的watcher
notify: function() {
// beforeUpdate
//遍历subs中所有的watcher的实例
this.subs.forEach(function(sub) {
// 每一个watcher的实例调用update方法
sub.update();
});
// updated
}
};
Dep.target = null;