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 的时候 会再次执行 fn
let dummy
let run:any
const 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.foo++
expect(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)
}