chore: delay insert self anchor during hydration

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 1a5a3d2fdde38768a288be36338492812c67be82..34ae2180916fc53df003757f626ca14c065b30a1 100644 (file)
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -659,17 +659,6 @@ export function createHydrationFunctions(
         )
       }
     }
-
-    // the server output does not contain blank text nodes. It appears here that
-    // it is a dynamically inserted anchor, and needs to be skipped.
-    // e.g. vaporInteropImpl.mount() > selfAnchor
-    if (
-      node &&
-      node.nodeType === DOMNodeTypes.TEXT &&
-      !(node as Text).data.trim()
-    ) {
-      node = nextSibling(node)
-    }
     return node
   }
 

diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
index d007788827b01e202630695d899b0ee53b19dde0..1e88ad00ab070401ed769a2d91a830ea3ac4b063 100644 (file)
--- a/packages/runtime-vapor/src/vdomInterop.ts
+++ b/packages/runtime-vapor/src/vdomInterop.ts
@@ -24,6 +24,7 @@ import {
   isRef,
   isVNode,
   onScopeDispose,
+  queuePostFlushCb,
   renderSlot,
   setTransitionHooks as setVNodeTransitionHooks,
   shallowReactive,
@@ -74,7 +75,12 @@ const vaporInteropImpl: Omit<
 > = {
   mount(vnode, container, anchor, parentComponent) {
     let selfAnchor = (vnode.el = vnode.anchor = createTextNode())
-    container.insertBefore(selfAnchor, anchor)
+    if (isHydrating) {
+      // avoid vdom hydration children mismatch by the selfAnchor, delay its insertion
+      queuePostFlushCb(() => container.insertBefore(selfAnchor, anchor))
+    } else {
+      container.insertBefore(selfAnchor, anchor)
+    }
     const prev = currentInstance
     simpleSetCurrentInstance(parentComponent)