VueJS Memory Leak when Switching Routes

Question

Whenever I switch routes, I have noticed that Vue components in my application are never destroyed and only created (the # Deleted column is always 0 as I toggle between routes). To be extra clear, the number of new components created is always equal to the number of components displayed on that route i.e. NONE of the Vue components are ever destroyed and every component on the route is recreated when a route is revisited.

I've been researching to debug the problem and I know that the following are usually culprits of memory leaks in VueJS.

• The use of a Global Event Bus and failure to unregister the callback. This is detailed clearly here. While I do use a Global Event Bus in some areas of my application, I'm also experiencing memory leaks on pages where I don't create any event listeners on the Global Event Bus, which leads me to believe that this is not the issue here.
• Failure to manually clean up memory yourself when using 3rd party libraries, a problem outlined by the VueJS documentation. Again, I've been looking at memory usage on pages that do not use third party libraries and I'm still getting memory leaks on those.

There is one more potential issue I've come across which I don't quite understand. In this github thread, the OP said the following in regards to potential causes of memory leaks in VueJS:

So I made sure I wasn't doing anything stupid like storing a reference to this on a Vuex Store...

Can someone please explain what the OP means here in regards to Vuex and memory leaks?

Additionally, what are some other potential issues that cause memory leaks in VueJS that I have missed that could be affecting my application?

How else should I be debugging my memory leak outside of using the Memory tab in Chrome devtools?

Answer 1

Memory is such a pain to debug and your logs look curiously similar to mine.

What i found was be careful of your logs : console.log(vuecompoent) actually stores your component in memory and does not release it.

Also consider that I turned off vue dev tools as well, but im not sure if this was causing the issue .

Look into the retainers section . This may give you some insight.