VUE 3.0源码之任务调度模块

末蓝、 2022-10-26 14:05 39阅读 0赞

任务调度模块的功能在`runtime-core`下的`scheduler`文件

## 变量 ##

首先会定义几个全局变量用于存储任务和状态。

// 主任务队列，用于存储更新任务
    const queue: (Job | null)[] = []
    // 后置回调，任务队列执行完毕后执行
    const postFlushCbs: Function[] = []
    // 微任务
    const p = Promise.resolve()
    
    // 是否正在执行队列
    let isFlushing = false
    // 微任务已创建，任务队列等待执行（把执行队列的函数放入微任务中）
    let isFlushPending = false
    
    // 一次执行期间同一任务次数上限
    const RECURSION_LIMIT = 100

## API ##

该模块会抛出5个API函数

// 把fn用微任务的方式执行
    export function nextTick(fn?: () => void): Promise<void> { 
      return fn ? p.then(fn) : p
    }
    
    // 添加任务并启动微任务
    export function queueJob(job: Job) { 
      if (!queue.includes(job)) { 
        queue.push(job)
        queueFlush()
      }
    }
    
    // 删除任务
    export function invalidateJob(job: Job) { 
      const i = queue.indexOf(job)
      if (i > -1) { 
        queue[i] = null
      }
    }
    
    // 添加后置回调函数并启动微任务
    export function queuePostFlushCb(cb: Function | Function[]) { 
      if (!isArray(cb)) { 
        postFlushCbs.push(cb)
      } else { 
        postFlushCbs.push(...cb)
      }
      queueFlush()
    }
    // 执行后置回调函数
    export function flushPostFlushCbs(seen?: CountMap) { 
      if (postFlushCbs.length) { 
        const cbs = [...new Set(postFlushCbs)]
        postFlushCbs.length = 0
        if (__DEV__) { 
          seen = seen || new Map()
        }
        for (let i = 0; i < cbs.length; i++) { 
          if (__DEV__) { 
            checkRecursiveUpdates(seen!, cbs[i])
          }
          cbs[i]()
        }
      }
    }

## 启动微任务 ##

在调用添加任务和添加后置回调函数两个API的时候会调用`queueFlush`启动微任务，既把`flushJobs`放入Promise的回调里。

// 如果空闲则启动微任务
    function queueFlush() { 
      if (!isFlushing && !isFlushPending) { 
        isFlushPending = true
        nextTick(flushJobs)
      }
    }

## 执行任务和回调函数 ##

在主线程空闲后会执行微任务既`flushJobs`，该函数会执行并清空`queue`中的任务，然后执行并清空回调函数，最后如果执行任务期间有任务或回调函数加入则已同步的方式重新执行一遍`flushJobs`

// 执行主任务，并在清空队列后执行后置回调函数
    // seen用于记录本次队列执行期间同一任务的执行次数
    function flushJobs(seen?: CountMap) { 
      isFlushPending = false
      isFlushing = true
      let job
      if (__DEV__) { 
        seen = seen || new Map()
      }
    
      // 按任务的id排序，保证父组件比子组件先更新
      queue.sort((a, b) => getId(a!) - getId(b!))
    
      while ((job = queue.shift()) !== undefined) { 
        if (job === null) { 
          continue
        }
        if (__DEV__) { 
          checkRecursiveUpdates(seen!, job)
        }
        callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
      }
      flushPostFlushCbs(seen)
      isFlushing = false
      // 执行在执行期间插入的任务和后置回调函数
      if (queue.length || postFlushCbs.length) { 
        flushJobs(seen)
      }
    }