Vue3的任务队列分析

前提准备

1、Vue3的版本vue v3.4.30

2、Vue3对应的源码：https://cdn.bootcdn.net/ajax/libs/vue/3.4.30/vue.global.js

内容介绍

介绍了vue3中2个任务队列主要方法的调用情况

 全局队列数组 和 控制参数
queue[]
pendingPostFlushCbs[]

isFlushing  当前有任务在执行时为true， 没有在执行时就是false执行flushJobs时会设置为true
isFlushPending 当前没有任务在执行时为true，在执行时就是false
flushIndex  表示当前执行任务的在queue队列中的序号
postFlushIndex 表示当前执行任务的在pendingPostFlushCbs队列中的序号

操作队列的方法：
1、flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0)
 功能是：把queue队列中的任务循环取出 执行cb()。这个函数在被调用代码块中同步执行

2、flushPostFlushCbs(seen)
  功能是：把pendingPostFlushCbs队列中的任务循环取出 执行cb()。这个函数在被调用代码块中同步执行

3、queuePostFlushCb(cb)
   功能是：往pendingPostFlushCbs队列中加入cb，然后执行queueFlush(),然后回触发微任务

4、queueJob(job)
   功能是：执行queue.push(job);就是把任务放入queue队列中，触发queueFlush(),然后回触发微任务

5、queueFlush(无参数)
   功能是：执行resolvedPromise.then(flushJobs); 创建一个微任务flushJobs。这个方法全局只会被queuePostFlushCb和queueJob调用

6、flushJobs(seen)
   功能是：先把queue任务队列中出去，循环执行callWithErrorHandling(job, null, 14); 然后调用flushPostFlushCbs(seen)，这个函数执行会被queueFlush调用

几个方法的调用关系图