Memory Leak #180

Assume this template:

<div v-auto-animate class="flex flex-column flex-grow-1"
             :style="{ gap: `${conf.style_quest_spacing / 16}rem` }">
  <StageSongItem :song="song" :config="conf" :index="index + 1" v-for="(song, index) in songs" :key="song.db_id"/>
</div>

In javascript, this triggers every second.

const getActiveSongs = async () => {
  const ret: { songs: Song[], finished: number } = (await axios.get('/api/song/active')).data
  songs.value = ret.songs
  finishedCount.value = ret.finished
}

It is observed that this function is called every time the songs.value is set

the forEach will setTimeout on every el children, and doesn't clearTimeout, which will create thousands of thousands closure and callbacks, and leads to memory leak.

This replacement of array is common in vue design.

So, in theory, any update frequency less than 2s will cause the memory go insane eventually. In fact the intervals is never get clearInterval either, so that is another leak point.

In conclusion, auto-animate doesn't work with changing items (for a long runtime)