Memory leak by reactive data

[blackkk68]

Repository with reproduction

https://github.com/blackkk68/vue_memory_leak

Problem

Reactive data doesn't remove by garbage collector after component unmount

Snapshot without any actions

Snapshot after component with reactive data mounted (big array in memory)

Snapshot after component with reactive data unmounted and garbage collector launched (array is still in memory)

Snapshot after press button many times (much memory use)

There's no memory leak if using regular array without ref. Is this normal behaviour?

[panstromek]

You should be able to figure out who holds the reference to this array, if you click through the heap snapshot. I suspect that it's a console (rather surprisingly I guess). Because you console.log() the response, browser has to keep the array in memory to make sure it can be displayed in the console.

You can test this out, try to remove the console.log and see if the behaviour is the same. If you still reproduce the problem, then I'd look through the heap snapshot and see if the array is being held by some internal Vue data structure and if so, why.

[blackkk68]

Thanks for your answer