perf(runtime): clear container on unmount

Author: sxzz

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(

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(