颇有名气的网站建设专家,成都网站开发技术,企业网站空间备案吗,网站建设工作分工effect.scheduler功能实现
主要先了解scheduler需要实现什么样的需求#xff0c;有一下四点#xff1a;
1 通过 effect 的第二个参数给定一个 scheduler 的 fn
2 effect 第一次执行的时候 还会执行 fn
3 当 响应式对象 set update 不执行fn 而是执行 scheduler
4 如果说…effect.scheduler功能实现
主要先了解scheduler需要实现什么样的需求有一下四点
1 通过 effect 的第二个参数给定一个 scheduler 的 fn
2 effect 第一次执行的时候 还会执行 fn
3 当 响应式对象 set update 不执行fn 而是执行 scheduler
4 如果说当执行 runner 的时候 会再次执行 fn
清楚了scheduler需求后照旧先来看测试案例通过测试案例来驱动代码开发
it(scheduler,(){// 1 通过 effect 的第二个参数给定一个 scheduler 的 fn// 2 effect 第一次执行的时候 还会执行 fn// 3 当 响应式对象 set update 不执行fn 而是执行 scheduler// 4 如果说当执行 runner 的时候 会再次执行 fnlet dummylet run:anyconst scheduler jest.fn((){run runner})const obj reactive({foo:1})const runner effect((){dummy obj.foo},{ scheduler })expect(scheduler).not.toHaveBeenCalled()expect(dummy).toBe(1)obj.fooexpect(scheduler).toHaveBeenCalledTimes(1)run()expect(dummy).toBe(2)})在测试用例中我们就可以看到我们往effect中传入了第二个参数options并且在options中有scheduler函数所以我们就可以在effect中接受到我们传入的options
接下来我分别一截图的方式展示增加的代码并且附上解释
effect实例中存储scheduler 当 响应式对象 set update 执行 scheduler 最后
附上trigger完整代码
export function trigger(target,key){const depsMap targetMap.get(target)const dep depsMap.get(key)for (const effect of dep) {if(effect.scheduler){effect.scheduler()} else {effect.run()}}}附上effect完整代码
export function effect(fn,options:any {}){const _effect new ReactiveEffect(fn,options.scheduler)_effect.run()return _effect.run.bind(_effect)
}
