@JhonWeawer

Version

2.6.14

Browser

Version 97.0.4692.99 (Official Build) (64-bit) (Ubuntu)

Reproduction link

github.com

Steps to reproduce

1. Call method $destroy for element with id='app'.
2. Create Heap snapshot in browser .

---

Screenshot for steps:

---

1 step11111
2 step22222222

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:
33333333

I also checked memory leaks for prod builds:
Screenshot of prod build result with Vue event @click heap size 4.6mb:
Screenshot from 2022年01月26日 19-11-17
Screenshot of prod build result without Vue event @click but have addEventListener and removeEventListener heap size 1.8mb :
55555555555

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.