Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

document new vue 3 page lifecycle behaviour #28182

Open
deleteme opened this issue Jul 16, 2024 · 4 comments
Open

document new vue 3 page lifecycle behaviour #28182

deleteme opened this issue Jul 16, 2024 · 4 comments
Labels
documentation suspense

Comments

@deleteme
Copy link

deleteme commented Jul 16, 2024 •
edited

Environment

  • Operating System: Linux
  • Node Version: v18.20.3
  • Nuxt Version: 3.12.3
  • CLI Version: 3.12.0
  • Nitro Version: 2.9.7
  • Package Manager: [email protected]
  • Builder: -
  • User Config: compatibilityDate, devtools
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-jks9ab?file=package.json

Easily reproducible with two pages that log the mounted, beforeUnmount, and unmounted lifecycle methods.

Describe the bug

When navigating between pages, the previous page component exists longer than expected, after the new one is mounted.

This problem doesn't exist In Nuxt 2. The previous page destroyed lifecycle method (the equivalent of Vue 3's unmounted), is called before the new page mounts.

Additional context

This bug impacts @vue/apollo-option package, which relies upon the unmounted lifecycle method to perform cleanup operations. A consequence of this bug is that bad GraphQL requests can happen from a page that should already be unmounted.

Previously reported here #13879.

Logs

No response
@stackblitz StackBlitz
Copy link

stackblitz bot commented Jul 16, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@danielroe
Copy link
Member

This is likely not a bug but just how Vue suspense works.

Would you see if you can reproduce this in pure Vue SSR without Nuxt (reproduction sandbox)? 🙏

@deleteme
Copy link
Author

Reproduced here: https://stackblitz.com/edit/github-r5rukn?file=src/pages/Home.vue. It is unclear to me if this change is from vue-router 4 or Vue 3. I don't see mention of it in the vue-router 4 migration docs.

Does this page lifecycle change warrant mention in the page migration docs?

@danielroe
Copy link
Member

Thank you @deleteme. Yes, I would be very happy to document this to help others if you or someone else wanted to raise a PR. 🙏

@danielroe danielroe changed the title New pages are mounted before the previous page unmounts document new vue 3 page lifecycle behaviour Jul 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation suspense
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@deleteme @danielroe