From 3fa4069a1c7707459d2f8f8285eb2918d3fe56fd Mon Sep 17 00:00:00 2001
From: =?utf8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 6 Oct 2024 01:42:32 +0800
Subject: [PATCH] perf(runtime): clear container on unmount

---
 .../runtime-vapor/src/apiCreateVaporApp.ts    | 23 ++++++++++++++-----
 packages/runtime-vapor/src/apiRender.ts       |  6 ++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/runtime-vapor/src/apiCreateVaporApp.ts b/packages/runtime-vapor/src/apiCreateVaporApp.ts
index c4d547de29..dd9fef347b 100644
--- a/packages/runtime-vapor/src/apiCreateVaporApp.ts
+++ b/packages/runtime-vapor/src/apiCreateVaporApp.ts
@@ -109,17 +109,23 @@ export function createVaporApp(
       return app
     },
 
-    mount(rootContainer): any {
+    mount(container): any {
       if (!instance) {
-        rootContainer = normalizeContainer(rootContainer)
+        container = normalizeContainer(container)
         // #5571
-        if (__DEV__ && (rootContainer as any).__vue_app__) {
+        if (__DEV__ && (container as any).__vue_app__) {
           warn(
             `There is already an app instance mounted on the host container.\n` +
               ` If you want to mount another app on the same host container,` +
               ` you need to unmount the previous app by calling \`app.unmount()\` first.`,
           )
         }
+
+        // clear content before mounting
+        if (container.nodeType === 1 /* Node.ELEMENT_NODE */) {
+          container.textContent = ''
+        }
+
         instance = createComponentInstance(
           rootComponent,
           rootProps,
@@ -128,17 +134,22 @@ export function createVaporApp(
           context,
         )
         setupComponent(instance)
-        render(instance, rootContainer)
+        render(instance, container)
 
-        app._container = rootContainer
+        app._container = container
         // for devtools and telemetry
-        ;(rootContainer as any).__vue_app__ = app
+        ;(container as any).__vue_app__ = app
 
         if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
           app._instance = instance
           devtoolsInitApp(app, version)
         }
 
+        if (container instanceof Element) {
+          container.removeAttribute('v-cloak')
+          container.setAttribute('data-v-app', '')
+        }
+
         return instance
       } else if (__DEV__) {
         warn(
diff --git a/packages/runtime-vapor/src/apiRender.ts b/packages/runtime-vapor/src/apiRender.ts
index d828c37022..db4eed5339 100644
--- a/packages/runtime-vapor/src/apiRender.ts
+++ b/packages/runtime-vapor/src/apiRender.ts
@@ -5,7 +5,7 @@ import {
   setCurrentInstance,
   validateComponentName,
 } from './component'
-import { insert, querySelector, remove } from './dom/element'
+import { insert, querySelector } from './dom/element'
 import { flushPostFlushCbs, queuePostFlushCb } from './scheduler'
 import { invokeLifecycle } from './componentLifecycle'
 import { VaporLifecycleHooks } from './enums'
@@ -153,13 +153,13 @@ function mountComponent(
 }
 
 export function unmountComponent(instance: ComponentInternalInstance): void {
-  const { container, block, scope } = instance
+  const { container, scope } = instance
 
   // hook: beforeUnmount
   invokeLifecycle(instance, VaporLifecycleHooks.BEFORE_UNMOUNT, 'beforeUnmount')
 
   scope.stop()
-  block && remove(block, container)
+  container.textContent = ''
 
   // hook: unmounted
   invokeLifecycle(
-- 
2.47.2