So we just started with clean Vue 3 a few months ago, and we are slowly transitioning our php/twig/jquery application to Vue 3 feature by feature.
This an example for multiple features where this memory leak occurs. This was the most simple to recreate outside of our application.
I’ve tried things for a few days now but I’m not able to find the issue. I’m also still quite new to vue coming from a react background. So I’m thinking I might be doing something obvious wrong maybe you can pinpoint me to it.
This can be found on my github
So if you start it locally or build it you see it consumes around 92mb (running with
npm run serve)
If you do a snapshot of the memory you can see it has a handful Detached HTMLDivEelements (non if you build it for production, but the memory leak is still happening there)
Now go ahead and click the links in top part and go back to the start page. For this example I clicked every link in the to part and went back.
Now the app consumes 290mb of memory and has over 4.4k detached elements.
If I check out one of those elements it’s all elements that were loaded before.
I tried updating element und Vue to the most current release but without any luck. I got 3.0.11 installed in our app and in this example.
It feels like something super simple but I can’t get around what it is.