fix vuejs#12897:call newly pushed watcher orderly

src/core/observer/scheduler.ts

@@ -8,7 +8,7 @@ import type { Component } from 'types/component'
 
 export const MAX_UPDATE_COUNT = 100
 
-const queue: Array<Watcher> = []
+let queue: Array<Watcher> = []
 const activatedChildren: Array<Component> = []
 let has: { [key: number]: true | undefined | null } = {}
 let circular: { [key: number]: number } = {}
@@ -96,6 +96,12 @@ function flushSchedulerQueue() {
  id = watcher.id
  has[id] = null
  watcher.run()
+ //when flushing,new watchers will be added to the queue and they should be resort
+ queue = [
+ ...queue.slice(0, index + 1),
+ ...queue.slice(index + 1).sort(sortCompareFn)
+ ]
+
  // in dev build, check and stop circular updates.
  if (__DEV__ && has[id] != null) {
  circular[id] = (circular[id] || 0) + 1

test/unit/modules/observer/scheduler.spec.ts

@@ -151,6 +151,36 @@ describe('Scheduler', () => {
  }).then(done)
  })
 
+ // Github issue #12897
+ it('should call newly pushed watcher orderly via the flush attribute after current watcher is done', done => {
+ const callOrder: any[] = []
+ queueWatcher({
+ id: 1,
+ user: true,
+ run() {
+ callOrder.push(1)
+
+ queueWatcher({
+ id: 3,
+ run() {
+ callOrder.push(4)
+ },
+ post: true
+ })
+ queueWatcher({
+ id: 4,
+ run() {
+ callOrder.push(3)
+ }
+ }),
+ callOrder.push(2)
+ }
+ })
+ waitForUpdate(() => {
+ expect(callOrder).toEqual([1, 2, 3, 4])
+ }).then(done)
+ })
+
  // GitHub issue #5191
  it('emit should work when updated hook called', done => {
  const el = document.createElement('div')