-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
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.
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
[Performance] Using this.$route inside a computed triggers reactivity while we are changing pages #27272
Comments
Start a new pull request in StackBlitz Codeflow. |
The issue comes from vue-router and suspense - we need to ensure that within each suspense fork we have different route objects. We in fact even do custom handling within We probably need to port this fix to |
Hello 👋, I started working on this issue, but I got a little stuck. I didn't manage to make it work, but from investigation it looks like |
@jakubednar This might help. It's how we ensure that we use the provided route rather than nuxt/packages/nuxt/src/pages/plugins/route-injection.ts Lines 17 to 27 in f209158
|
I could create a Vue plugin and overwrite the Doing a replace like you did will be hard for this case when using options API |
I tried fixing it yesterday, but all I managed to affect was |
After further investigation, I think you can do something like this: let replaced = false Did this very fast but I think you get the general idea, do a replace for |
I did something similar, but i got error that |
Thanks for making the PR for me @jakubednar time saver! <3 |
Environment
Reproduction
https://stackblitz.com/edit/github-89dmst?file=pages%2F[...slug].vue
Describe the bug
Issue:
this.$route
inside it, the computed will trigger when we click on aNuxtLink
while we are still changing pages. Being inside a computed seems special because if you inject$route
directly into the template it does not update until page change.Observing the issue should be easy with the provided reproduction.
Notes:
useRoute
composable, if we create a computed that uses the value of the composable inside it will not trigger during a route change (correct behavior for me).$route
, the second one is a computed usingthis.$route
inside and you can see that it updates while changing pages, the third one is a computed using theuseRoute
composable value and it only updates after route change.Impact:
this.$route
while we are migrating to full Composition API, each page change it's triggering some computeds and, by consequence, patching a full component with a lot of data.Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: