bug: Vue lifecycle hooks are only called in top level component

[aparajita]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

The Vue lifecycle hooks (onIonViewWillEnter, etc.) are only called in the top level component for any given page, whether or not that component's template contains IonPage. Lifecycle hooks will never be called in a child component, even if their template contains IonPage.

Expected Behavior

The documentation is silent on the restriction imposed by the current behavior. I expected the lifecycle hooks to work from anywhere within the component hierarchy.

Steps to Reproduce

1. Open the stackblitz project.
2. Note that in Tab one, the lifecycle hooks are in a child component and are not called; no alert appears.
3. Click on Tab two. An alert appears for onIonViewWillEnter and onIonViewDidEnter, since they are called from within the top level component.

Code Reproduction URL

https://stackblitz.com/edit/angular-wmuse1?file=src/views/TabTwo.vue

Ionic Info

Run from StackBlitz project:

Ionic:

Ionic CLI : 6.20.9

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v16.14.2
npm : 7.17.0
OS : Linux 5.0

Additional Information

I am not the only person who has run into this issue. If it is not feasible to make the lifecycle hooks work in a child component, the documentation should be updated to clearly state the restriction that they only work within the top level component of a view.

[liamdebeasi]

Thanks for the report. I can reproduce this behavior, but Ionic is working as intended. Lifecycle hooks are called on the component that the router maps the URL to. In this case, your /one route maps to the TabOne component. As a result, the lifecycle hooks will be called on TabOne and not TabOneChild.

I will clarify this behavior on the docs.

[aparajita]

Thanks! Put that in the docs and you can save us a few gray hairs. 😁

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.