Ionic-framework: bug: ionic vue lifecycle events not called in component context

[stripathix]

Bug Report

Ionic version:

"@ionic/vue": "5.4.0",
"@ionic/vue-router": "5.4.0",
"vue": "3.0.1",
"vue-router": "4.0.0-beta.11",

Current behavior:
Ionic lifecycle events do not have access to router instance using this. Looks like context is changed.

Expected behavior:
Should allow use router and other things that were allowed in methods previously. For example, if I want to read route name or query param then I cant do it.

Steps to reproduce:
In this repo https://github.com/stripathix/ionic-modal-issue this context of mounted and ionic lifecycle events are not the same. Ionic lifecycle does not even have access to the router and also looks like ionViewDidEnter was called even before mounted

Related code:

mounted() {
    console.log(this)
  },
  methods: {
    ionViewDidEnter() {
      console.log('Home page did enter');
      console.log(this)
      this.test()
    },
    ionViewDidLeave() {
      console.log('Home page did leave');
    },
    ionViewWillEnter() {
      console.log('Home page will enter');
    },
    ionViewWillLeave() {
      console.log('Home page will leave');
    },
    test() {
      console.log(this);
    },
  },

[stripathix]

Hi @liamdebeasi ,

As per docs of lifecycle events

When you navigate to a new page, Ionic Framework will keep the old page
 in the existing DOM, but hide it from your view and transition the new page.

Can we somehow also prevent this from happening if we don’t want to cache pages already visited? I say this because it does have a performance impact. Views in my apps are pretty heavy in terms of drawing charts in d3 and even drawing 3d globe in canvas. Keeping all that in DOM even when the view has changed and no longer needed causes performance lag.

[MarekGogol]

Hi @liamdebeasi ,

As per docs of lifecycle events

When you navigate to a new page, Ionic Framework will keep the old page
 in the existing DOM, but hide it from your view and transition the new page.

Can we somehow also prevent this from happening if we don’t want to cache pages already visited? I say this because it does have a performance impact. Views in my apps are pretty heavy in terms of drawing charts in d3 and even drawing 3d globe in canvas. Keeping all that in DOM even when the view has changed and no longer needed causes performance lag.

Yes, I totally agree. It would be really useful to somethimes throw pages from cache and destroy these components. Sometimes if state in cached pages/components changes, this cached pages may throw errors when they are not displayed, because user is for example not logged anymore, or other objects are not available. Of course solution is to condition this objects and check if they are available. But better approach will be sometimes destroy these components from cache.

Thanks

[liamdebeasi]

@stripathix Can you open a new issue and provide a GitHub repo with an example of this performance issue?

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected] --save-exact

[alextran1502]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected] --save-exact

This resolves the issue for me

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22348, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[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.