实现vue3中的调度器

162 阅读1分钟

我们可以决定effect执行的时机

image.png

实现:我们在ReactiveEffect里增加stop方法

image.png

  • 改变激活状态
  • 停止effect的收集

增加effect的返回值

image.png

但是现在会有一个问题,有时候状态改变了我不想更新,我希望自己可以控制,但是上述操作并不支持用户自己控制,那么我们可以加一个调度器

image.png

  • 我们改了五次,但是都只是打印了run,并没有渲染,这样我们就自己可以控制渲染

image.png

  • 我们可以控制等同步代码执行完后,再进行更新,模拟批处理更新

在ReactiveEffect拿到scheduler保存起来

image.png

在trigger方法里执行effect的时候进行处理

image.png

  • 当执行的effect上有scheduler的时候,执行scheduler,否则执行run,刷新视图

这个调度器实际上就可以实现了组件的异步更新