feat(runtime-core): app.onUnmount() for registering cleanup functions (close: #4516)

packages/runtime-core/__tests__/apiCreateApp.spec.ts

@@ -313,6 +313,36 @@ describe('api: createApp', () => {
     ).toHaveBeenWarnedTimes(1)
   })
 
+  test('onUnmount', () => {
+    const cleanup = jest.fn().mockName('plugin cleanup')
+    const PluginA: Plugin = app => {
+      app.provide('foo', 1)
+      app.onUnmount(cleanup)
+    }
+    const PluginB: Plugin = {
+      install: (app, arg1, arg2) => {
+        app.provide('bar', arg1 + arg2)
+        app.onUnmount(cleanup)
+      }
+    }
+
+    const app = createApp({
+      render: () => `Test`
+    })
+    app.use(PluginA)
+    app.use(PluginB)
+
+    const root = nodeOps.createElement('div')
+    app.mount(root)
+
+    //also can be added after mount
+    app.onUnmount(cleanup)
+
+    app.unmount()
+
+    expect(cleanup).toHaveBeenCalledTimes(3)
+  })
+
   test('config.errorHandler', () => {
     const error = new Error()
     const count = ref(0)

packages/runtime-core/src/apiCreateApp.ts

@@ -39,6 +39,7 @@ export interface App<HostElement = any> {
     isSVG?: boolean
   ): ComponentPublicInstance
   unmount(): void
+  onUnmount(cb: () => void): void
   provide<T>(key: InjectionKey<T> | string, value: T): this
 
   // internal, but we need to expose these for the server-renderer and devtools
@@ -185,6 +186,7 @@ export function createAppAPI<HostElement>(
 
     const context = createAppContext()
     const installedPlugins = new Set()
+    const pluginCleanupFns: Array<() => any> = []
 
     let isMounted = false
 
@@ -320,9 +322,23 @@ export function createAppAPI<HostElement>(
         }
       },
 
+      onUnmount(cleanupFn: () => void) {
+        if (typeof cleanupFn === 'function') pluginCleanupFns.push(cleanupFn)
+        else if (__DEV__) {
+          warn(
+            `Expected function as first argument to app.onUnmount(), but got ${typeof cleanupFn}`
+          )
+        }
+      },
+
       unmount() {
         if (isMounted) {
           render(null, app._container)
+          pluginCleanupFns.map(fn => {
+            try {
+              fn()
+            } catch {}
+          })
           if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
             app._instance = null
             devtoolsUnmountApp(app)