You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In order to know when to rerender components, Vue's reactivity system keeps track of what reactive effects (like the render function of components) are dependent on which reactive state. It stores these reactivity "dependencies" in a WeakMap.
I assume that when a component is unmounted, the reactivity dependencies leading to that component are not needed anymore. But I can't seem to find that cleanup anywhere.
This app contains 2 “pages”: the red page and the blue page. When you press the "change page" button a lot I would assume that Vue cleans up the reactivity dependencies of the state from the Red component. It does not need to know that it should rerender the Red component if the Red state changes when the Red component is not mounted anymore. But if I create a breakpoint in the reactivity file at line 499, I see that the targetMap is growing and growing.
My question is: when is this targetMap being cleaned up? If it is only being cleaned up if the object itself is garbage collected,
how is this not causing massive memory leaks in apps with centralised stores?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
In order to know when to rerender components, Vue's reactivity system keeps track of what reactive effects (like the render function of components) are dependent on which reactive state. It stores these reactivity "dependencies" in a WeakMap.
I assume that when a component is unmounted, the reactivity dependencies leading to that component are not needed anymore. But I can't seem to find that cleanup anywhere.
I created a codesandbox for it to better illustrate what I mean: https://codesandbox.io/s/vue-depsmap-cleanup-wdq7rf?file=/src/Red.vue
This app contains 2 “pages”: the red page and the blue page. When you press the "change page" button a lot I would assume that Vue cleans up the reactivity dependencies of the state from the Red component. It does not need to know that it should rerender the Red component if the Red state changes when the Red component is not mounted anymore. But if I create a breakpoint in the reactivity file at line 499, I see that the
targetMap
is growing and growing.My question is: when is this targetMap being cleaned up? If it is only being cleaned up if the object itself is garbage collected,
how is this not causing massive memory leaks in apps with centralised stores?
Beta Was this translation helpful? Give feedback.
All reactions