vue keepAlive组件中的storageContainer存在内存泄漏

1,160 阅读1分钟

Vue测试版本

"vue": "3.2.12",

内存泄漏快照

image.png

源码分析内存泄漏原因

在keepAlive组件的setup函数中, 声明了一个变量 const storageContainer = createElement('div');,在组件失活的时候会将当前组件的真实DOM移到storageContainer节点下面; 但当组件卸载时,没有将该组件的真实DOM从storageContainer节点上移除,故导致内存泄漏。

image.png

解决方案

在pruneCacheEntry函数中, 将组件真实DOM从storageContainer节点下移除

image.png