Vue: Possible memory leak when v-for in development mode

Created on 17 Jul 2018 · 3Comments · Source: vuejs/vue

Version

2.5.16

Reproduction link

https://codepen.io/anon/pen/KBMaOY

Steps to reproduce

Open the codepen https://codepen.io/anon/pen/gjMgzG
Click a couple of times to list 0 item, then 1000
See the memory increasing
Try force GC (trash icon) before measure it
Take heap snapshots in Chrome "Memory" tab
Watch the memory usage in the Chome task manager (shift esc)
Watch the memory usage in OS task manager

What is expected?

Same memory usage after garbage collector

What is actually happening?

Despite the "Performance" tab displays the same memory usage, the "Memory" heap snapshot displays a memory increase.
Also, the both Chrome and OS task managers show the memory only increasing.

It get worse when:

Using Vuei18n (even without translating)
Having big children components

Tested on:

Windows 7 64 Bits
Chrome 67.0.3396.99 64 bits

Please, consider that:

I may be doing something wrong
It can be a Chrome issue
It can be an OS issue

improvement

Source

peluprvi

👍2

Most helpful comment

I have the same issue, any advance about this?

Rikhart on 23 Oct 2018

👍2

All 3 comments

It seems there is a leak in non-production mode only. You should be fine in production

posva on 17 Jul 2018

Thanks for the return @posva .

I also created an issue on vue-i18n, since the memory usage gets way too heavy when using it.
I'm using vue-virtual-scroller too, which do destroy and create a lot for components when paginate or scroll the page.

I don't know how much these can be related, but these two packages together with some complex or deeper components structure are taking a lot of memory usage even on production mode.

Looking into Google task manager, my app tab increases by ~2.400K each item I scroll down/up (each one is destroyed/created in the processes).
In less than a minute scrolling up and down I get get almost 1GB memory usage, production mode or developer tools closed or after GC. And it doesn't go much down after route.

I'm not used to the core code of vue or vue-i18n, but It looks like the installed components structure are getting copied for each nested component in the app, and the GC can't clean that up after destroy that nested components. It can be the way vue-i18n installs itself, I really don't know. The data below is what makes me think about that: