先定义一个对象 const obj = {name: 'why', age:18};
响应式的效果是:当obj对象里的name 属性或 age属性发生变化时,可以执行相应的函数 dependAge() 或 dependAge()
响应式的思路是:创建一个obj的映射
let objMap = new Map();
objMap.set('name', dependName);
objMap.set('age',dependAge);
当侦听到name或age属性发生变化时,可以通过 objMap.get('name') 或 objMap.get('age')拿到对应的depend函数并执行
在这之前,应该还要有一个侦听,就是侦听到底是哪个对象发生了改变,真实的代码里可能有很多个对象,这时候可以使用WeakMap
const weakmap = new WeakMap()
weakmap.set(obj, objMap);
这样,当侦听到obj的属性发生变化时,首先通过weakmap.get(obj)拿到objMap,然后再通过objMap.get(**)拿到对应的函数,如图
如下代码就是一个简单的响应式的实现
这里watchFn(() => {console.log(objProxy.name)})的执行顺序是这样的:首先向watchFn传入了一个箭头函数,并让箭头函数赋值给了attrFn,接着执行了该箭头函数,在执行的过程中碰到了objProxy.name,这就调用了objProxy里的get方法,这里attrFn还是该箭头函数,而不是null,在get函数里拿到了depend实例之后通过调用depend.addFn(),就将attrFn传入了reactives集合中。reactives之所以是集合而不是数组,是因为要确保传入的函数不重复。这样通过get操作,depend实例里的reactives就有了一个函数,那么在之后objProxy.name='kobe',触发了set,拿到的depend实例里的reactives也就有了函数,所以直接调用depend.execute()直接执行reactives里面的函数即可