Vue version

3.2.36

Link to minimal reproduction

https://github.com/ahmad-666/vue3-memory

Steps to reproduce

I have two components and each one has two local data ... in "created" life cycle I assign some extremely large array to these data then I change route between these two components

What is expected?

vue should remove all data related to unmounted components(inside 'unmounted' life cycle all data properties should be undefined or null)

What is actually happening?

from the memory tab in developer tool I can see heap memory size will increase with each route change also inside 'unmounted' life cycle I can still access to my local data with this.

System Info

No response

Any additional comments?

if I add bellow code to both of these components then memory will release but vue itself should clear memory related to the unmounted component

beforeUnmount() { this.data1= undefined; this.data2= undefined; },

I have same problem :(

I can't reproduce this. As you didn't really give instructions about how you tested this, here's what I did:

• run build
• run preview and open the url shown in the console
• open Memory tab in Chrome dev Tools
• quickly switch between two routes.
• see memory grow towards 40 - 50 - 70 MB
• wait a bit / click garbage collect button
• see heap settle back on ~29.6 MB no matter how many times I have switched routes before.

Sidenote: I don't see how the fact that you can still access the data in the unMounted hook should have any influence on what is being kept in memory after that. all references to the whole unmounted component instance, including any data contained in its properties, is being removed after that hook as been called, so it should be (and seems to be) properly garbage collectable