feat(vue): add composition API ionic lifecycle hooks (#22970)

resolves #22769

packages/vue/src/hooks.ts

@@ -1,5 +1,12 @@
 import { BackButtonEvent } from '@ionic/core';
-import { inject, ref, Ref } from 'vue';
+import {
+  inject,
+  ref,
+  Ref,
+  ComponentInternalInstance,
+  getCurrentInstance
+} from 'vue';
+import { LifecycleHooks } from './utils';
 
 type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
 
@@ -62,3 +69,38 @@ export const useKeyboard = (): IonKeyboardRef => {
     unregister
   }
 }
+
+/**
+ * Creates an returns a function that
+ * can be used to provide a lifecycle hook.
+ */
+const injectHook = (lifecycleType: LifecycleHooks, hook: Function, component: ComponentInternalInstance | null): Function | undefined => {
+  if (component) {
+
+    // Add to public instance so it is accessible to IonRouterOutlet
+    const target = component as any;
+    const hooks = target.proxy[lifecycleType] || (target.proxy[lifecycleType] = []);
+    const wrappedHook = (...args: unknown[]) => {
+      if (target.isUnmounted) {
+        return;
+      }
+
+      return args ? hook(...args) : hook();
+    };
+
+    hooks.push(wrappedHook);
+
+    return wrappedHook;
+  } else {
+    console.warn('[@ionic/vue]: Ionic Lifecycle Hooks can only be used during execution of setup().');
+  }
+}
+
+const createHook = <T extends Function = () => any>(lifecycle: LifecycleHooks) => {
+  return (hook: T, target: ComponentInternalInstance | null = getCurrentInstance()) => injectHook(lifecycle, hook, target);
+}
+
+export const onIonViewWillEnter = createHook(LifecycleHooks.WillEnter);
+export const onIonViewDidEnter = createHook(LifecycleHooks.DidEnter);
+export const onIonViewWillLeave = createHook(LifecycleHooks.WillLeave);
+export const onIonViewDidLeave = createHook(LifecycleHooks.DidLeave);

packages/vue/src/index.ts

@@ -16,7 +16,17 @@ export { IonApp } from './components/IonApp';
 
 export * from './components/Overlays';
 
-export { IonKeyboardRef, IonRouter, useBackButton, useIonRouter, useKeyboard } from './hooks';
+export {
+  IonKeyboardRef,
+  IonRouter,
+  useBackButton,
+  useIonRouter,
+  useKeyboard,
+  onIonViewWillEnter,
+  onIonViewDidEnter,
+  onIonViewWillLeave,
+  onIonViewDidLeave
+} from './hooks';
 
 export {
   modalController,

packages/vue/src/utils.ts

@@ -3,6 +3,19 @@ import { Config as CoreConfig, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYC
 
 type LIFECYCLE_EVENTS = typeof LIFECYCLE_WILL_ENTER | typeof LIFECYCLE_DID_ENTER | typeof LIFECYCLE_WILL_LEAVE | typeof LIFECYCLE_DID_LEAVE;
 
+export enum LifecycleHooks {
+  WillEnter = 'onIonViewWillEnter',
+  DidEnter = 'onIonViewDidEnter',
+  WillLeave = 'onIonViewWillLeave',
+  DidLeave = 'onIonViewDidLeave'
+}
+const hookNames = {
+  [LIFECYCLE_WILL_ENTER]: LifecycleHooks.WillEnter,
+  [LIFECYCLE_DID_ENTER]: LifecycleHooks.DidEnter,
+  [LIFECYCLE_WILL_LEAVE]: LifecycleHooks.WillLeave,
+  [LIFECYCLE_DID_LEAVE]: LifecycleHooks.DidLeave
+}
+
 const ids: { [k: string]: number } = { main: 0 };
 
 export const generateId = (type = 'main') => {
@@ -21,6 +34,18 @@ export const fireLifecycle = (vueComponent: any, vueInstance: Ref<ComponentPubli
   if (instance?.[lifecycle]) {
     instance[lifecycle]();
   }
+
+  /**
+   * Fire any Composition API
+   * Ionic Lifecycle hooks
+   */
+  if (instance) {
+    const hook = hookNames[lifecycle];
+    const hooks = instance[hook];
+    if (hooks) {
+      hooks.forEach((hook: Function) => hook());
+    }
+  }
 }
 
 export const getConfig = (): CoreConfig | null => {