实现虚拟列表时,发现v-for存在内存泄漏
Vue version
^3.2.25
Link to minimal reproduction
Steps to reproduce
- 页面持续往下滚动,displayItems数组会根据滚动高度刷新数据,v-for循环展示displayItems,当displayItems数组改变时,dom重新渲染,旧dom被销毁 2.通过chrome的开发工具可以看到,旧dom已经被销毁了,但是并没有被回收,还存在内存中。dom节点不断增大,内存占用也在增加。
What is expected?
预期效果应该是旧dom会被回收。
What is actually happening?
奇怪的是,当循环中存在vue组件时,才会出现该问题,如 test组件
当我把vue组件去掉时,垃圾回收机制就正常了,销毁的dom能正常被回收
下面是我在虚拟列表的上下滚动时所录制的内存情况 (vue2不会出现这种情况)
System Info
No response
Any additional comments?
No response
play 这样会回收吗
这个看起来并是不我想要的虚拟列表
It's probably resolved by https://github.com/vuejs/devtools/commit/60aeed218badfed81b7e7957ebd0c0b521de4cfa It's NOT released yet.