Description
Version
2.6.14
Browser
Version 97.0.4692.99 (Official Build) (64-bit) (Ubuntu)
Reproduction link
Steps to reproduce
- Call method $destroy for element with
id='app'. - Create Heap snapshot in browser .
Screenshot for steps:
1 step
2 step
And we see heap not cleared from Vue components.
But if we remove @click="myMetd" from line 5. and uncomment the code on line 30 in which we ourselves add a click event on the button element, and on line 33 we remove this event listening, then we see that the memory in the browser has really cleared :) .
Screenshot with cleaned heap:
I also checked memory leaks for prod builds:
Screenshot of prod build result with Vue event @click heap size 4.6mb:
Screenshot of prod build result without Vue event @click but have addEventListener and removeEventListener heap size 1.8mb :
What is expected?
VueComponents not exist in heap after destroy App.vue(this happens after manual removeEventListener)
What is actually happening?
VueComponents exist in heap after destroy App.vue (see memory heap size)
I saw a similar issue #5187 but the browser still doesn't remove the vue handlers.
Also in the documentation for 2.x vue, https://vuejs.org/v2/guide/events.html#Why-Listeners-in-HTML, the third point about the fact that vue does not remove event listeners is still faulty.