How/When does Vue cleanup the Deps in reactive properties?

Hi Folks, I have a maybe unusual Question so I start with explaining my situation:

I’m working on an Overwolf App that heavily uses Vue/Vuex and its reactivity.
In Overwolf, you can work with multiple Desktop windows, I think comparable to electron apps.
The App is designed in a way, that each window has it’s own root-app (Vue).

Now I tried to use reactive properties across those windows, keeping the “main” store in one of the windows, and reusing it on other windows.
That works well in general, but there is an issue regarding Memory Leaks.

Let’s consider this setup:
Window A holds the vuex store
Window B accesses that store and uses reactive properties.

This leads to the situation, that Window A holds a reference to the vm within Window B.
Due to the Dep instances used for reactive getters etc.

The Issue here is that when closing Window B, the reference on Window A will never be cleaned up, and with that other References. This causes huge memory leaks.

I know this is a very specific Scenario and Vue is not designed for this.
That’s why I don’t ask for a Solution but would like to understand, how and when Vue is removing those Dep references, and if there is a way to force that (when Window B closes basically).

If needed I might jump into understanding all the code around it, but if anyone has a mental model of this ready to share, that would be great help to evaluate if this is solvable :slight_smile:

Thanks for participating in this discussion and have a great day!

I don’t believe Vue does anything beyond its normal lifecycle cleanup (unmounting components, etc.). References should be cleaned up by JS’s internal GC… as long as they’re no longer used.

Makes sense as nothing has instructed Window A to terminate that reference. Can you receive an event in Window A when this happens to do some manual cleanup yourself?

There used to be a good article series (it was the first link - itnext) on Vue’s internals, but unfortunately it’s been deleted.

Thanks for the reference, the link to "read-vue-sourcode might be helpful for more internals.

Makes sense as nothing has instructed Window A to terminate that reference. Can you receive an event in Window A when this happens to do some manual cleanup yourself?

That would be my goal.
If I call app.$destroy() I see that the Deps are removed from the reactive property getters.

Before $destroy() on Window B

image
[…]
image
[…]
image

After

image

But even though there shouldn’t be more references to the instance, it stays allocated in Memory:

So this might be some Issue with the Overwolf internals rather than the Vue internals :thinking:
I’m also wondering if this detached $el has any implications on Garbage collection

As an extended FYI:
Overwolf is running on .net.
So (I assume without deeper knowledge) that there is some mechanism that outside of JS that brings the Vue instance into the other window. It’s hard to tell if that creates Memory Leaks by itself.
I’ll try to test for that now, just not totally sure how :slight_smile:

(couldn’t add this in the post before)
image

This gets cleaned up properly once I set it to null on the MainWindow again, so in principle it works.
image

So for some reason there has to be some dangling References left after doing app.$destroy()

I tried to somewhat recreate the constellation of having an object with a div reference but that also seems to be cleaned up properly once the window is closed and the reference on Window A gets set to null

image