fix(runtime-core/scheduler): sort postFlushCbs to ensure refs are set before lifecycle hooks (#1854)

fix #1852

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -7,7 +7,7 @@ import {
   ref,
   h
 } from '../src/index'
-import { render, nodeOps, serializeInner } from '@vue/runtime-test'
+import { render, nodeOps, serializeInner, TestElement } from '@vue/runtime-test'
 import {
   ITERATE_KEY,
   DebuggerEvent,
@@ -484,6 +484,37 @@ describe('api: watch', () => {
     expect(calls).toEqual(['render', 'watcher 1', 'watcher 2', 'render'])
   })
 
+  // #1852
+  it('flush: post watcher should fire after template refs updated', async () => {
+    const toggle = ref(false)
+    let dom: TestElement | null = null
+
+    const App = {
+      setup() {
+        const domRef = ref<TestElement | null>(null)
+
+        watch(
+          toggle,
+          () => {
+            dom = domRef.value
+          },
+          { flush: 'post' }
+        )
+
+        return () => {
+          return toggle.value ? h('p', { ref: domRef }) : null
+        }
+      }
+    }
+
+    render(h(App), nodeOps.createElement('div'))
+    expect(dom).toBe(null)
+
+    toggle.value = true
+    await nextTick()
+    expect(dom!.tag).toBe('p')
+  })
+
   it('deep', async () => {
     const state = reactive({
       nested: {

packages/runtime-core/__tests__/scheduler.spec.ts

@@ -403,6 +403,22 @@ describe('scheduler', () => {
     expect(calls).toEqual(['job3', 'job2', 'job1'])
   })
 
+  test('sort SchedulerCbs based on id', async () => {
+    const calls: string[] = []
+    const cb1 = () => calls.push('cb1')
+    // cb1 has no id
+    const cb2 = () => calls.push('cb2')
+    cb2.id = 2
+    const cb3 = () => calls.push('cb3')
+    cb3.id = 1
+
+    queuePostFlushCb(cb1)
+    queuePostFlushCb(cb2)
+    queuePostFlushCb(cb3)
+    await nextTick()
+    expect(calls).toEqual(['cb3', 'cb2', 'cb1'])
+  })
+
   // #1595
   test('avoid duplicate postFlushCb invocation', async () => {
     const calls: string[] = []