Memory Leak
reitowo opened this issue · comments
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)