feat: use postFlush instead of promise

Author: Doctor-wu

packages/runtime-core/src/directives.ts

@@ -40,6 +40,9 @@ export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (
   binding: DirectiveBinding<V>,
   vnode: VNode<any, T>,
   prevVNode: Prev,
+  // register a callback witch will be called
+  // after all dirHooks have been executed
+  postFlushDirs?: (fn: () => void) => void,
 ) => void
 
 export type SSRDirectiveHook = (
@@ -129,6 +132,7 @@ export function invokeDirectiveHook(
 ) {
   const bindings = vnode.dirs!
   const oldBindings = prevVNode && prevVNode.dirs!
+  const postFlushDirsQueue: (() => void)[] = []
   for (let i = 0; i < bindings.length; i++) {
     const binding = bindings[i]
     if (oldBindings) {
@@ -147,8 +151,13 @@ export function invokeDirectiveHook(
         binding,
         vnode,
         prevVNode,
+        (fn: () => void) => {
+          postFlushDirsQueue.push(fn)
+        },
       ])
       resetTracking()
     }
   }
+  postFlushDirsQueue.forEach(postDir => postDir())
+  postFlushDirsQueue.length = 0
 }

packages/runtime-dom/src/directives/vShow.ts

@@ -7,8 +7,6 @@ interface VShowElement extends HTMLElement {
   [vShowOldKey]: string
 }
 
-const resolvedPromise = Promise.resolve()
-
 export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   beforeMount(el, { value }, { transition }) {
     el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
@@ -23,17 +21,19 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
       transition.enter(el)
     }
   },
-  updated(el, { value, oldValue }, { transition }) {
+  updated(el, { value, oldValue }, { transition }, _, postFlush) {
     if (
       !value === !oldValue &&
       (el.style.display === el[vShowOldKey] || (!value && transition))
     )
       return
     if (transition) {
       if (value) {
-        transition.beforeEnter(el)
-        setDisplay(el, true)
-        transition.enter(el)
+        postFlush!(() => {
+          transition.beforeEnter(el)
+          setDisplay(el, true)
+          transition.enter(el)
+        })
       } else {
         transition.leave(el, () => {
           setDisplay(el, false)
@@ -43,7 +43,9 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
       // #10038
       // when multi vShow be applied to the same element
       // and the sync setDisplay will impact other vShow
-      postSetDisplay(el, value)
+      postFlush!(() => {
+        setDisplay(el, value)
+      })
     }
   },
   beforeUnmount(el, { value }) {
@@ -59,12 +61,6 @@ function setDisplay(el: VShowElement, value: unknown): void {
   el.style.display = value ? el[vShowOldKey] : 'none'
 }
 
-function postSetDisplay(el: VShowElement, value: unknown): void {
-  resolvedPromise.then(() => {
-    setDisplay(el, value)
-  })
-}
-
 // SSR vnode transforms, only used when user includes client-oriented render
 // function in SSR
 export function initVShowForSSR() {