Vue-router: Memory leak when switching routes

[jazoom]

As mentioned in #1111 I believe there is another memory leak. I do not know the exact cause but I have been able to create a very simple app to reproduce it.

Vue.js / vue-router versions

Any recent version

Reproduction Link

https://github.com/jazoom/vue-memory-leak

Steps to reproduce

$ yarn
$ npm run dev
Open Chrome devtools to "Profile" tab
Select "Record Allocation Timeline"
Press "Start" button
In app: Click the link to go to "About" page then back to "Home" page -> repeat multiple times

What is Expected?

The garbage collector should be able to collect the number elements.

What is actually happening?

It appears there is a memory leak.

[hworld]

This actually seems to be a really serious issue. My pages are really complex and after just 15 clicks to other pages the memory usage goes up to 1gb. It must be happening to nearly all pages.

I made a much simpler repro case by just copying the getting started from vue-router into a jsfiddle. I've not really changed anything except to just put links within the component templates. This ensures there's some click handlers attached and what not.

Repro case: https://jsfiddle.net/b6exw85n/1/
The example just uses latest vue and vue-router.

Just do the allocation timeline. Keep on clicking the link within the views. You'll see that blue bars are retained every time you switch away from the route. Clicking into it you'll notice it's the link elements. I wish I knew enough about vue and vue-router internals to dig into it, but I'm not sure why they're retaining. =\

Really hope this helps to dig into it!

[posva]

Thanks, that really helped 🙂

[jazoom]

Nice work @hworld. You really boiled that down to its simplest possible form.

It makes me wonder why this hasn't plagued every app for a while and been found by now. I only found it when I changed to server-side rendering and my servers kept quickly running out of memory.

[yyx990803]

fixed in Vue core https://github.com/vuejs/vue/commit/3209f6f517a4fa44c563cd7cc048fa29be1bc930

[badpunman]

I'm not sure this is fixed properly yet. I'm using 2.2.6 and am experiencing big leaks again.

Again, there's some retained html elements that are not present in DOM, that are referenced through _refElm. I'll have to do some experimenting.

[yyx990803]

@badpunman I can no longer reproduce leaks in @jazoom or @hworld 's code using 2.2.6 - please provide a separate repro if possible.

[badpunman]

Sorry for the false alarm here. We had a bug of our own where someone put a reference to component to vuex store so it wouldn't clean up from memory. Duh.

[zx5435]

内存好了，但是cpu爆表
vue2.2.6 + vur-router2.4

主要出现在Page A => Page B => Page A

help~

[ralphchristianeclipse]

Same here vue-router creates a not noticable increasing ram with small data but with big data it will surely show off

[jigneshparmar126]

Vue js Switch Customise copy this code and use it as per your need

https://github.com/jigneshparmar126/switch-button/blob/master/README.md

[waratah]

Note only: Please also note that if you have a v-for and the key is NULL for a couple of values you may end up with an issue.

[AlastairGrowcott]

Reproduced with @hworld's example. The example is using what I can only assume to be links to the latest vue and vue-router javascript.

[AlastairGrowcott]

As commented above, the leak is small, but with bigger data will surely grow.
It's been over a year. Any chance of a fix?

[superchangme]

i use element-ui and its tree component also has the memory leak problem.The VNodes has deep chain about $parent and $childrent. i only know when i use v-if and not switch route,memory can gc,but use route switch it cause memory leak.Who can help me,i am in suck for two years...https://github.com/ElemeFE/element/issues/14858