前提准备
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调用