scheduler.ts 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. import {
  2. EffectFlags,
  3. type SchedulerJob,
  4. SchedulerJobFlags,
  5. type WatchScheduler,
  6. } from '@vue/reactivity'
  7. import type { ComponentInternalInstance } from './component'
  8. import { isArray } from '@vue/shared'
  9. export type SchedulerJobs = SchedulerJob | SchedulerJob[]
  10. export type QueueEffect = (
  11. cb: SchedulerJobs,
  12. suspense: ComponentInternalInstance | null,
  13. ) => void
  14. let isFlushing = false
  15. let isFlushPending = false
  16. // TODO: The queues in Vapor need to be merged with the queues in Core.
  17. // this is a temporary solution, the ultimate goal is to support
  18. // the mixed use of vapor components and default components.
  19. const queue: SchedulerJob[] = []
  20. let flushIndex = 0
  21. // TODO: The queues in Vapor need to be merged with the queues in Core.
  22. // this is a temporary solution, the ultimate goal is to support
  23. // the mixed use of vapor components and default components.
  24. const pendingPostFlushCbs: SchedulerJob[] = []
  25. let activePostFlushCbs: SchedulerJob[] | null = null
  26. let postFlushIndex = 0
  27. const resolvedPromise = /*#__PURE__*/ Promise.resolve() as Promise<any>
  28. let currentFlushPromise: Promise<void> | null = null
  29. export function queueJob(job: SchedulerJob) {
  30. if (!(job.flags! & SchedulerJobFlags.QUEUED)) {
  31. if (job.id == null) {
  32. queue.push(job)
  33. } else if (
  34. // fast path when the job id is larger than the tail
  35. !(job.flags! & SchedulerJobFlags.PRE) &&
  36. job.id >= (queue[queue.length - 1]?.id || 0)
  37. ) {
  38. queue.push(job)
  39. } else {
  40. queue.splice(findInsertionIndex(job.id), 0, job)
  41. }
  42. if (!(job.flags! & SchedulerJobFlags.ALLOW_RECURSE)) {
  43. job.flags! |= SchedulerJobFlags.QUEUED
  44. }
  45. queueFlush()
  46. }
  47. }
  48. export function queuePostRenderEffect(cb: SchedulerJobs) {
  49. if (!isArray(cb)) {
  50. if (!(cb.flags! & SchedulerJobFlags.QUEUED)) {
  51. pendingPostFlushCbs.push(cb)
  52. if (!(cb.flags! & SchedulerJobFlags.ALLOW_RECURSE)) {
  53. cb.flags! |= SchedulerJobFlags.QUEUED
  54. }
  55. }
  56. } else {
  57. // if cb is an array, it is a component lifecycle hook which can only be
  58. // triggered by a job, which is already deduped in the main queue, so
  59. // we can skip duplicate check here to improve perf
  60. pendingPostFlushCbs.push(...cb)
  61. }
  62. queueFlush()
  63. }
  64. function queueFlush() {
  65. if (!isFlushing && !isFlushPending) {
  66. isFlushPending = true
  67. currentFlushPromise = resolvedPromise.then(flushJobs)
  68. }
  69. }
  70. export function flushPostFlushCbs() {
  71. if (!pendingPostFlushCbs.length) return
  72. const deduped = [...new Set(pendingPostFlushCbs)]
  73. pendingPostFlushCbs.length = 0
  74. // #1947 already has active queue, nested flushPostFlushCbs call
  75. if (activePostFlushCbs) {
  76. activePostFlushCbs.push(...deduped)
  77. return
  78. }
  79. activePostFlushCbs = deduped
  80. activePostFlushCbs.sort((a, b) => getId(a) - getId(b))
  81. for (
  82. postFlushIndex = 0;
  83. postFlushIndex < activePostFlushCbs.length;
  84. postFlushIndex++
  85. ) {
  86. activePostFlushCbs[postFlushIndex]()
  87. activePostFlushCbs[postFlushIndex].flags! &= ~SchedulerJobFlags.QUEUED
  88. }
  89. activePostFlushCbs = null
  90. postFlushIndex = 0
  91. }
  92. // TODO: dev mode and checkRecursiveUpdates
  93. function flushJobs() {
  94. isFlushPending = false
  95. isFlushing = true
  96. // Sort queue before flush.
  97. // This ensures that:
  98. // 1. Components are updated from parent to child. (because parent is always
  99. // created before the child so its render effect will have smaller
  100. // priority number)
  101. // 2. If a component is unmounted during a parent component's update,
  102. // its update can be skipped.
  103. queue.sort(comparator)
  104. try {
  105. for (let i = 0; i < queue!.length; i++) {
  106. queue[i]()
  107. queue[i].flags! &= ~SchedulerJobFlags.QUEUED
  108. }
  109. } finally {
  110. flushIndex = 0
  111. queue.length = 0
  112. flushPostFlushCbs()
  113. isFlushing = false
  114. currentFlushPromise = null
  115. // some postFlushCb queued jobs!
  116. // keep flushing until it drains.
  117. if (queue.length || pendingPostFlushCbs.length) {
  118. flushJobs()
  119. }
  120. }
  121. }
  122. export function nextTick<T = void, R = void>(
  123. this: T,
  124. fn?: (this: T) => R,
  125. ): Promise<Awaited<R>> {
  126. const p = currentFlushPromise || resolvedPromise
  127. return fn ? p.then(this ? fn.bind(this) : fn) : p
  128. }
  129. // #2768
  130. // Use binary-search to find a suitable position in the queue,
  131. // so that the queue maintains the increasing order of job's id,
  132. // which can prevent the job from being skipped and also can avoid repeated patching.
  133. function findInsertionIndex(id: number) {
  134. // the start index should be `flushIndex + 1`
  135. let start = flushIndex + 1
  136. let end = queue.length
  137. while (start < end) {
  138. const middle = (start + end) >>> 1
  139. const middleJob = queue[middle]
  140. const middleJobId = getId(middleJob)
  141. if (
  142. middleJobId < id ||
  143. (middleJobId === id && middleJob.flags! & SchedulerJobFlags.PRE)
  144. ) {
  145. start = middle + 1
  146. } else {
  147. end = middle
  148. }
  149. }
  150. return start
  151. }
  152. const getId = (job: SchedulerJob): number =>
  153. job.id == null ? Infinity : job.id
  154. const comparator = (a: SchedulerJob, b: SchedulerJob): number => {
  155. const diff = getId(a) - getId(b)
  156. if (diff === 0) {
  157. const isAPre = a.flags! & SchedulerJobFlags.PRE
  158. const isBPre = b.flags! & SchedulerJobFlags.PRE
  159. if (isAPre && !isBPre) return -1
  160. if (isBPre && !isAPre) return 1
  161. }
  162. return diff
  163. }
  164. export type SchedulerFactory = (
  165. instance: ComponentInternalInstance | null,
  166. ) => WatchScheduler
  167. export const createVaporSyncScheduler: SchedulerFactory =
  168. instance => (job, effect, immediateFirstRun, hasCb) => {
  169. if (immediateFirstRun) {
  170. effect.flags |= EffectFlags.NO_BATCH
  171. if (!hasCb) effect.run()
  172. } else {
  173. job()
  174. }
  175. }
  176. export const createVaporPreScheduler: SchedulerFactory =
  177. instance => (job, effect, immediateFirstRun, hasCb) => {
  178. if (!immediateFirstRun) {
  179. job.flags! |= SchedulerJobFlags.PRE
  180. if (instance) job.id = instance.uid
  181. queueJob(job)
  182. } else if (!hasCb) {
  183. effect.run()
  184. }
  185. }
  186. export const createVaporPostScheduler: SchedulerFactory =
  187. instance => (job, effect, immediateFirstRun, hasCb) => {
  188. if (!immediateFirstRun) {
  189. queuePostRenderEffect(job)
  190. } else if (!hasCb) {
  191. queuePostRenderEffect(effect.run.bind(effect))
  192. }
  193. }