Memory leaks when switching routes

[badpunman]

// Edit: Seems like this has something to do with trying to use the .vue files only. Using components defined in js is working fine..
// Yeah, what I wasn't mentioning was, is that I was running this on windows. Project works when building on linux. Either webpack or vuerouter is messing it up on windows. More likely webpack.

Greetings. I have been aching my head with this for a while.

I got a lot of memory leaks in my bigger project, so I tried getting rid of all the extra libraries and come to conclusion that there has to be something wrong with either vue-router, vue itself or webpack. Vue-router seems most likely candidate right now.

I'm running vue-router in vuejs-template's webpack-template, with hot-reload dev-build (Problem also applies to the distrubtion build). I am using .vue standalone files.

I have two separate routes. I have buttons in main vue instance for switching between the routes in addition to the router-view component.

I have some very basic rudimentary elements and components inside these views.

Using chrome's profiler, I use heap snapshots and filter these snapshots for "Vue*" classes.

Every time I switch between routes, new VueComponents and Vue$3 objects get added to the heap. Existing ones don't seem to be removed. These never seem to be garbage collected.

Any idea what's going on here?

[posva]

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or JSBin containing a set of reproducible steps that can lead to the behaviour you described.

[badpunman]

Aye, excuse me for not providing one in initial post. I retract my statement that this only happens on windows. I don't know how I interpreted it working on linux yesterday, but it doesn't.

Since this could likely be something to do with my webpack build, although I haven't changed much, here's the the whole project

https://github.com/badpunman/memoryleakproject

Setup

git clone https://github.com/badpunman/memoryleakproject
npm install
npm run dev

Reproduction steps

Using chrome, go to localhost:8080
F12, Profiles-tab, take heap shot.
Filter result with 'Vue'.
There are 2 VueComponent objects and 7 Vue$3's.

Switch between the views by clicking on "Hello" and "home" buttons a couple of times.

Take another heapshot.
Filter result with 'vue'
There are loads more VueComponents and vue$3s.
These never get released.

This seems to be an issue with .vue single file components only that are referenced in src/router.js

[posva]

Since this could likely be something to do with my webpack build, although I haven't changed much, here's the the whole project

In that case, can you make sure it is not by first trying to reproduce it on a jsfiddle, please?

[badpunman]

In that case, can you make sure it is not by first trying to reproduce it on a jsfiddle, please?

Sorry, I'm not sure how to do that, considering issue concerns .vue single file components. I don't imagine jsfiddle supports webpack and vue-loader.

[posva]

I meant to be sure it's not a vue-router problem, so without using vue files 😄
Why do you think it's a vue sfc issue?

[badpunman]

Ah, yes, well, without using .vue files, instead using components defined in separate .js or in the same file as the src/router.js, it works. Providing jsfiddle of it would be rather pointless if everything is just working.

I just don't understand at all what the mechanism is at play here that makes it so different for .vue. I would presume the vue-router stores the vue-loader's output once and wouldn't spam multiple instances of everything when switching the views.

[posva]

Ah, yes, well, without using .vue files, instead using components defined in separate .js or in the same file as the src/router.js, it works.

Ok! Sorry, I didn't understood you tested that already.
I'll give it a check

[badpunman]

Aye, thanks for checking.

It seems like I can use .vue files without memory leaks as long as I don't assign them directly to the router. It's rather silly, but I guess I'll ensure my router views are declared as non .vue for now.

[posva]

Sorry for the delay. I got a hard time looking at what you did. There was still a lot of code that didn't affect the issue. It seems to be related to an input having a v-model.
There are things you shouldn't be doing on your Vue files, like creating global components with Vue.component

I couldn't narrow down the issue yet to verify it. So I just wanted to keep you updated

[badpunman]

It seems to be related to an input having a v-model.

Oh. That's strange. Seems to be so.

[badpunman]

Seems to also trigger when adding @click event handler in a vue file that is a direct route component.

Since both v-model and @click add event handlers to the dom elements, I presume this might be a case of event handlers not being cleaned up from the dom elements upon removal. No idea what the behind the scene mechanisms are for Vue or Vue-router for disposing of components though.

[posva]

Did you manage to boil down the repro? I'll gladly look at an updated version

[badpunman]

Nah, sorry. Been a tad busy as of late. Not sure how much more I can really boil it down.

[badpunman]

Results of more digging in to the problem:

It seems like when switching route, the previous Dom-node is retained in vm.$options._refElm. If the dom has those event listeners in the vue components, vue components are then also retained.

Now, I have no insight in to what _refElm is actually used for, or how to fix this.

I wonder if this is more a vue bug, or does vue-router somehow misuse something with vue?