[Bug Report] el-image预览图片关闭之后存在内存泄漏
- Dominant language
- Vue
- Stars
- 54k
- Forks
- 14.4k
- PR merge metrics
- No merged PRs in 30d
Description
### Element UI version
2.15.14
### OS/Browsers version
windows
### Vue version
2.7.14
### Reproduction Link
https://jsfiddle.net/27noyrx0/4/
### Steps to reproduce
1. 开启DevTools之后, 切到内存界面,
2. 直接点图片预览大图, 预览大图界面打开后, 直接点阴影部分关闭预览大图界面
3. 回到Devtools的内存界面, 选择真实渲染的虚拟机实例,, 先点击垃圾回收按钮触发垃圾回收, 之后直接拍摄内存快照,
4. 内存快照中搜索Detached的DOM, 发现预览大图界面相关的DOM节点都没有得到正确的垃圾回收

查看Element的el-image源码调试情况如下
image-viewer添加after-leave的钩子查看情况


调试时, 发现destroyed生命周期走到了after-leave函数的前面

根据vue源码的情况判断, after-leave执行时, 会自动清理父节点上存在的VNode信息, 此时因为destroyed周期里面就把节点移除了, 但是transition的after-leave钩子是在destroyed周期后才触发的, 因此走到after-leave那边时, Vue框架获取该元素的父级元素就获取不到, 从而导致对于绑定在父级元素上的VNode就没有得到有效的清理, 从而造成一直会在父级dom节点上存在对于VNode的引用, VNode又保持着对于预览界面DOM节点的引用, 预览大图界面的DOM节点就没办法被GC回收了


### What is Expected?
预览大图界面关闭后, 点击DevTool中的垃圾回收时, DOM节点能正常的被回收
### What is actually happening?
预览大图界面关闭后, 点击DevTool中的垃圾回收时, DOM节点没有回收
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.