feat: add new lifecycle onAfterUnmount

packages/runtime-core/src/apiLifecycle.ts

@@ -28,7 +28,7 @@ export function injectHook(
     const wrappedHook =
       hook.__weh ||
       (hook.__weh = (...args: unknown[]) => {
-        if (target.isUnmounted) {
+        if (target.isUnmounted && type !== LifecycleHooks.AFTER_UNMOUNT) {
           return
         }
         // disable tracking inside all lifecycle hooks
@@ -76,6 +76,7 @@ export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
 export const onUpdated = createHook(LifecycleHooks.UPDATED)
 export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
 export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)
+export const onAfterUnmounted = createHook(LifecycleHooks.AFTER_UNMOUNT)
 export const onServerPrefetch = createHook(LifecycleHooks.SERVER_PREFETCH)
 
 export type DebuggerHook = (e: DebuggerEvent) => void

packages/runtime-core/src/component.ts

@@ -434,6 +434,10 @@ export interface ComponentInternalInstance {
    * @internal
    */
   [LifecycleHooks.UNMOUNTED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.AFTER_UNMOUNT]: LifecycleHook
   /**
    * @internal
    */
@@ -561,6 +565,7 @@ export function createComponentInstance(
     bu: null,
     u: null,
     um: null,
+    au: null,
     bum: null,
     da: null,
     a: null,

packages/runtime-core/src/componentOptions.ts

@@ -41,7 +41,8 @@ import {
   onRenderTriggered,
   DebuggerHook,
   ErrorCapturedHook,
-  onServerPrefetch
+  onServerPrefetch,
+  onAfterUnmounted
 } from './apiLifecycle'
 import {
   reactive,
@@ -641,6 +642,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
     beforeUnmount,
     destroyed,
     unmounted,
+    afterUnmount,
     render,
     renderTracked,
     renderTriggered,
@@ -824,8 +826,8 @@ export function applyOptions(instance: ComponentInternalInstance) {
   registerLifecycleHook(onRenderTriggered, renderTriggered)
   registerLifecycleHook(onBeforeUnmount, beforeUnmount)
   registerLifecycleHook(onUnmounted, unmounted)
+  registerLifecycleHook(onAfterUnmounted, afterUnmount)
   registerLifecycleHook(onServerPrefetch, serverPrefetch)
-
   if (__COMPAT__) {
     if (
       beforeDestroy &&
@@ -1066,6 +1068,7 @@ export const internalOptionMergeStrats: Record<string, Function> = {
   updated: mergeAsArray,
   beforeDestroy: mergeAsArray,
   beforeUnmount: mergeAsArray,
+  afterUnmount: mergeAsArray,
   destroyed: mergeAsArray,
   unmounted: mergeAsArray,
   activated: mergeAsArray,

packages/runtime-core/src/enums.ts

@@ -7,6 +7,7 @@ export const enum LifecycleHooks {
   UPDATED = 'u',
   BEFORE_UNMOUNT = 'bum',
   UNMOUNTED = 'um',
+  AFTER_UNMOUNT = 'au',
   DEACTIVATED = 'da',
   ACTIVATED = 'a',
   RENDER_TRIGGERED = 'rtg',

packages/runtime-core/src/errorHandling.ts

@@ -34,6 +34,7 @@ export const ErrorTypeStrings: Record<LifecycleHooks | ErrorCodes, string> = {
   [LifecycleHooks.UPDATED]: 'updated',
   [LifecycleHooks.BEFORE_UNMOUNT]: 'beforeUnmount hook',
   [LifecycleHooks.UNMOUNTED]: 'unmounted hook',
+  [LifecycleHooks.AFTER_UNMOUNT]: 'afterUnmounted hook',
   [LifecycleHooks.ACTIVATED]: 'activated hook',
   [LifecycleHooks.DEACTIVATED]: 'deactivated hook',
   [LifecycleHooks.ERROR_CAPTURED]: 'errorCaptured hook',

packages/runtime-core/src/index.ts

@@ -52,6 +52,7 @@ export {
   onActivated,
   onDeactivated,
   onRenderTracked,
+  onAfterUnmounted,
   onRenderTriggered,
   onErrorCaptured,
   onServerPrefetch

packages/runtime-core/src/renderer.ts

@@ -35,7 +35,8 @@ import {
   NOOP,
   invokeArrayFns,
   isArray,
-  getGlobalThis
+  getGlobalThis,
+  observeDomRemoval
 } from '@vue/shared'
 import {
   queueJob,
@@ -1255,6 +1256,7 @@ function baseCreateRenderer(
       popWarningContext()
       endMeasure(instance, `mount`)
     }
+    afterUnmount(instance)
   }
 
   const updateComponent = (n1: VNode, n2: VNode, optimized: boolean) => {
@@ -2157,6 +2159,14 @@ function baseCreateRenderer(
     }
   }
 
+  const afterUnmount = (instance: ComponentInternalInstance) => {
+    const { vnode, au } = instance
+    const { el } = vnode
+    if (au && el) {
+      observeDomRemoval(el as Node, au)
+    }
+  }
+
   const remove: RemoveFn = vnode => {
     const { type, el, anchor, transition } = vnode
     if (type === Fragment) {

packages/shared/src/domUtils.ts

@@ -0,0 +1,47 @@
+import { isArray } from '.'
+const targetMap = new Map<Node, Set<Function>>()
+
+let observer: MutationObserver | null = null
+
+/**
+ * Observe DOM removal of a target element
+ * @param target
+ * @param callback
+ */
+export function observeDomRemoval(
+  target: Node,
+  callback: Function | Function[]
+) {
+  let cbSet = targetMap.get(target)
+
+  if (!cbSet) {
+    cbSet = new Set()
+    targetMap.set(target, cbSet)
+  }
+  if (isArray(callback)) {
+    callback.forEach(cb => cbSet!.add(cb))
+  } else {
+    cbSet.add(callback)
+  }
+
+  if (observer) return
+  observer = new MutationObserver(mutationsList => {
+    if (targetMap.size === 0) return
+    for (const mutation of mutationsList) {
+      const removedNodes = mutation.removedNodes
+      if (mutation.type === 'childList' && removedNodes.length > 0) {
+        for (let index = 0; index < removedNodes.length; index++) {
+          const removedNode = removedNodes[index]
+          for (const [target, cbSet] of targetMap) {
+            if (removedNode.contains(target)) {
+              cbSet.forEach(cb => cb())
+              targetMap.delete(target)
+              return
+            }
+          }
+        }
+      }
+    }
+  })
+  observer.observe(document, { childList: true, subtree: true })
+}

packages/shared/src/index.ts

@@ -12,3 +12,4 @@ export * from './escapeHtml'
 export * from './looseEqual'
 export * from './toDisplayString'
 export * from './typeUtils'
+export * from './domUtils'