Memory leak for vue3 vuex4 (__vue_devtools_global_hook__ is not cleared up)

Kasheftin commented 3 years ago

Version

6.0.0-beta.8

Browser and OS info

Chrome 88 / Ubuntu 20

Steps to reproduce

The original issue is here: https://github.com/vuejs/vuex/issues/1934

There's a trivial vue3 vuex4 app: https://kasheftin.github.io/vuex4-memory-leak-example2/

Load the app and use chrome devtools memory tab;
Take heap snapshot; The result is ~ 4.5 MB;
Press "Add" button. It will create 100 items in the store;
Take heap snapshot; The result is ~ 15.7 MB;
Press "Clear regular items" button. It will remove all items in the store;
Take heap snapshot; The result is still ~ 15.7 MB;
Add/remove items multiple times, notice the allocated space grows all the time;

That happens because of vue-devtools. If disable the extension -> no __vue_devtools_global_hook__ -> no memory leak.

What is expected?

Memory should be cleared up correctly

What is actually happening?

There's memory leak - memory usage grows all the time

Akryum commented 3 years ago

This is expected as part of the recording, please try clearing the timelines.

Kasheftin commented 3 years ago

Ok, then a very stupid question. What is devtools timelines and how to clear it? And why it happens on vuex4 but not on vuex3. I know about the performance tab, I can generate a report there and don't care about memory usage during this action. But that's just opening devtools, no performance report generation or whatever. On my opinion this should not lead to memory leak. And it should be possible to turn this functionality off using some hook variable in js source code. Is it possible? There're customers with devtools opened, and the real single page heavy app becomes unusable quite soon.

vuejs / devtools