> Observer 数据监控对象(core/observer/index.js)
usage:
new Observer(value):
value: any值;
监控数据通过value.__ob__访问ob实例对象;
>配置项
export const observerState = {
shouldConvert: true, //--深度监控
isSettingProps: false
}
>属性
value : 监控值,可以是任何类型的值,
dep: 订阅者实例对象
vmCount : vm实例数;
>实现原理:
基于es5中的defineProperty(obj,key,{
configurable : true,
enumerable : true.
get:function (){},
set:function (){}
})实现,监控的每一项数据闭包内部生成一个观察者dep实例对象,而dep.subs数组存放订阅者watcher列表;
set() =>
dep.notify() =>
dep.subs.forEach(watcher =>watcher.update())=>
watcher.run() =>
watcher.cb.call(watcher.vm,value,oldValue);
watcher.cb创建观察者时外部传入的回调函数
> vm.$set()方法的实现原理
let person = {name : 'libai'};
let arr = ['1','2','3'];
vm.$set(person,'age','100');
vm.$set(arr,2,'10');
设置对象情况
1、key存在,person[key] = value赋值;
如person被监控,通过set调用person.__ob__.dep.notify();
2、key不存在,person未被监控,person[key] = value赋值完事;
3、key存在,person被监控,
defineReactive(person.__ob__.value,key,value)实现数据监控,
person.__ob__.dep.notify()发布通知
> vm.$delete()方法实现原理,
person监控,person.__ob__.dep.notify()发布通知;
person未监控,则直接delete完事