Vue3源码系列之组件的更新实现批处理

331 阅读1分钟

当数据一变,就会触发对应的effect,然后重新调render重新渲染

第一步

首先我们需要处理一个事件里重复修改同一个值多次更新的问题,我们需要降低更新频率

我们在创建effect让render执行的时候,传入第二个参数scheduler

Image.png

这个时候,更新时就可以走我们自己的写的方法里,不会走effect参数里的函数,这点可能大家有点疑惑,我再贴那段源码里的代码

Image.png

  • effect触发的时候会先判断是否有scheduler,有就执行,否则才会去执行回调函数

第二步

我们希望有一个调度方法,把这些effect先去重,然后再去执行effect

Image.png

queneJob方法

Image.png

  • 如果队列里没有,则push进队列
  • 然后刷新队列,调用queneFlush

queneFlush方法

Image.png

  • 设置个变量,标识是否正在刷新中
  • 判断如果不是正在刷新中,则变量改成true
  • 你不断的调queneFlush,只有第一次能进来
  • 条件内部的promise会等待当前工作都执行后,再去调then,我们在then里去清空任务,调用flushJobs

flushJobs方法

Image.png

  • 把标识当前正在刷新的变量赋值回false
  • 然后我们在这里面希望保证先刷新父,再刷新子,和渲染的顺序是一样的,我们需要对队列进行排序,利用effect上的id
  • 排完序后让队列里的effect依次执行

至此,我们解决了多次调用更新的问题

如果您觉得有所收获,麻烦动动小手点个攒,谢谢啦~ 预知后事如何,且听下回分解~