Subscribe on changes!

Potential memory leak with keep-alive elements hidden early

avatar
Jan 21st 2022

Version

3.2.28

Reproduction link

codesandbox.io

Steps to reproduce

  1. Open memory panel in chrome devtools, run the garbage collection, then take heap snapshot (of 'mbwyj' instance),
  2. Click twice on the "toggle" button,
  3. Run the garbage collection and take a heap snapshot again, filter by "Detached"
  4. Click a pair number of times on the "toggle" button,
  5. Run the garbage collection and take a heap snapshot again, filter by "Detached"

What is expected?

The number of detached elements should not increase after each pair of clicks

What is actually happening?

The number of detached elements is increasing after each pair of clicks


Screenshot_2022-01-21_23-02-48

Funnily, the problem does not happen if either of this is done:

  • Comment the beforeUnmount() {}, in BeforeUnmountComponent
  • Move the <div v-for="x in 100" :key="x"> from App.vue to within the keep-alive of KeepAliveComponent

Might be related to https://github.com/vuejs/core/issues/5278, and relates to https://github.com/quasarframework/quasar/issues/11804