fix vuejs#12897:call newly pushed watcher orderly

Author: raoht

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')