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

Vue测试版本

"vue": "3.2.12",

内存泄漏快照

源码分析内存泄漏原因

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

解决方案

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

相关推荐
Listen·Rain2 小时前
Vue3中组件间通信详解
前端·javascript·vue.js
Listen·Rain2 小时前
Vue3中customRef详解
前端·javascript·vue.js
濮水大叔2 小时前
Hooks 之后,为什么前端仍需要“包裹”能力?
vue.js·react.js·前端框架
山东点狮信息科技有限公司3 小时前
企业级开源OA系统推荐
vue.js·spring boot·性能优化·系统架构·开源
gis开发之家6 小时前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
濮水大叔7 小时前
在 DTO 中使用 Form Layout 配置复杂表单,支持 Tabs/Groups/Sections
vue.js·typescript·node.js
张人玉7 小时前
Vue 3 + ECharts 智慧城市大屏——赣州智慧城市数据可视化平台
vue.js·echarts·智慧城市
come112347 小时前
Vue 3 与现代 JavaScript 常用语法指南
前端·javascript·vue.js
敖行客Allthinker7 小时前
Vuex 状态响应机制:watch 与 subscribe 的对比分析
vue.js
用户2930750976697 小时前
Vue3 流式 AI 对话:深入理解两个 done 与 buffer 缓存机制
vue.js