企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
> 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完事