memory leak through nested reactivity
Vue version
3.2.41
Link to minimal reproduction
Steps to reproduce
Open the memory tab of the browser and click the "Recalculate" button a few times, see the memory rise steadily and not being reclaimed, even after a forced GC.
What is expected?
Memory usage should stay close to constant as the amount of stored data stays the same when recalculating
What is actually happening?
Memory usage continuously climbs
System Info
No response
Any additional comments?
Noticed massive slowdowns in our calculation heavy app in production after migrating to vue/nuxt3. Seems like this memory leak is the reason for that.
2
1
I feel this is not strictly called a memory leak. The dynamic creation of computed causes memory to continue to grow. This is a result of improper use of computed. Let's say you create 1000 objects dynamically and they are all being used, of course, the GC can't recycle them.
Also note that you need to put the computed() at the level of the script setup. By being within a method, it's not attached to the component. But this is not a memory leak because this function
const pickComputed = (i) => {
return computed(() => {
return computedMap.value[i];
});
};
should not contain a computed within a function