vue3-yuanma/packages/runtime-core/src/scheduler.ts
Evan You 78977c3997 fix(scheduler): sort jobs before flushing
This fixes the case where a child component is added to the queue before
its parent, but should be invalidated by its parent's update. Same logic
was present in Vue 2.

Properly fixes #910
ref: https://github.com/vuejs/vue-next/issues/910#issuecomment-613097539
2020-04-14 17:31:35 -04:00

124 lines
2.9 KiB
TypeScript

import { ErrorCodes, callWithErrorHandling } from './errorHandling'
import { isArray } from '@vue/shared'
export interface Job {
(): void
id?: number
}
const queue: (Job | null)[] = []
const postFlushCbs: Function[] = []
const p = Promise.resolve()
let isFlushing = false
let isFlushPending = false
const RECURSION_LIMIT = 100
type CountMap = Map<Job | Function, number>
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()
}
function queueFlush() {
if (!isFlushing && !isFlushPending) {
isFlushPending = true
nextTick(flushJobs)
}
}
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]()
}
}
}
const getId = (job: Job) => (job.id == null ? Infinity : job.id)
function flushJobs(seen?: CountMap) {
isFlushPending = false
isFlushing = true
let job
if (__DEV__) {
seen = seen || new Map()
}
// Sort queue before flush.
// This ensures that:
// 1. Components are updated from parent to child. (because parent is always
// created before the child so its render effect will have smaller
// priority number)
// 2. If a component is unmounted during a parent component's update,
// its update can be skipped.
// Jobs can never be null before flush starts, since they are only invalidated
// during execution of another flushed job.
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
// some postFlushCb queued jobs!
// keep flushing until it drains.
if (queue.length || postFlushCbs.length) {
flushJobs(seen)
}
}
function checkRecursiveUpdates(seen: CountMap, fn: Job | Function) {
if (!seen.has(fn)) {
seen.set(fn, 1)
} else {
const count = seen.get(fn)!
if (count > RECURSION_LIMIT) {
throw new Error(
'Maximum recursive updates exceeded. ' +
"You may have code that is mutating state in your component's " +
'render function or updated hook or watcher source function.'
)
} else {
seen.set(fn, count + 1)
}
}
}