fix(runtime-core): cleanup hoisted vnode when unmount component

packages/runtime-core/src/component.ts

@@ -475,6 +475,11 @@ export interface ComponentInternalInstance {
    * @internal
    */
   ut?: (vars?: Record<string, string>) => void
+  /**
+   * cleanup el of hoisted vnode
+   * @internal
+   */
+  hoistedCleanup?: (() => void)[] | null
 }
 
 const emptyAppContext = createAppContext()
@@ -511,6 +516,7 @@ export function createComponentInstance(
     provides: parent ? parent.provides : Object.create(appContext.provides),
     accessCache: null!,
     renderCache: [],
+    hoistedCleanup: null,
 
     // local resolved assets
     components: null,

packages/runtime-core/src/renderer.ts

@@ -621,7 +621,7 @@ function baseCreateRenderer(
   ) => {
     let el: RendererElement
     let vnodeHook: VNodeHook | undefined | null
-    const { type, props, shapeFlag, transition, dirs } = vnode
+    const { type, props, shapeFlag, patchFlag, transition, dirs } = vnode
 
     el = vnode.el = hostCreateElement(
       vnode.type as string,
@@ -630,6 +630,14 @@ function baseCreateRenderer(
       props
     )
 
+    if (patchFlag === PatchFlags.HOISTED && parentComponent) {
+      ;(
+        parentComponent.hoistedCleanup || (parentComponent.hoistedCleanup = [])
+      ).push(() => {
+        vnode.el = null
+      })
+    }
+
     // mount children first, since some props may rely on child content
     // being already rendered, e.g. `<select value>`
     if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
@@ -2268,6 +2276,10 @@ function baseCreateRenderer(
       )
     }
     queuePostRenderEffect(() => {
+      if (instance.hoistedCleanup) {
+        instance.hoistedCleanup.forEach(cleanup => cleanup())
+        instance.hoistedCleanup = null
+      }
       instance.isUnmounted = true
     }, parentSuspense)