Vue优化：常见会导致内存泄漏问题及优化

最新推荐文章于 2025-06-28 08:48:21 发布

dk前端

最新推荐文章于 2025-06-28 08:48:21 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端内存泄漏及优化文章标签： vue js 内存优化

原文链接：https://www.cnblogs.com/plBlog/p/11429939.html

前端内存泄漏及优化专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨Vue应用中常见的内存泄漏问题，包括事件监听未解绑、第三方库资源未释放、echarts图表管理不当等场景，并提供解决方案，帮助开发者有效避免和解决内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听在window/body等事件没有解绑
绑在EventBus的事件没有解绑
模块形成的闭包内部变量使用完后没有置成null
使用第三方库创建，没有调用正确的销毁函数
echarts问题：
不要把chart实例赋值在this上。（this对象一直存在不会被回收）
析构掉生成的echarts对象。
//-dom 不存在时不画
if (!this. $refs.barchart) { return } //- 不要重复初始化 let Chart = echarts.getInstanceByDom(this.$ refs.barchart)
if (!Chart) {
Chart = echarts.init(this. $KaTeX parse error: Expected 'EOF', got '}' at position 25: \dotshart, 'light') }̲ //-释放echarts对象\dots$ refs.barchart)
if (dcharts) {
echarts.dispose(dcharts)
}
},
keep-alive 的 include 里存的其实是一个 vuex 中的一个数据源（数据源保存的是路由名称），当关闭标签页时，这个数据源中的一项会被移除。这之前，我们在组件里监听到这个数据源的变化，如果此组件对应的路由（这个路由应在 mounted 的时候保存下来）已经不在数据源中了，那就应该销毁此组件。this.$destroy(“组件名，es6写法就是class类名”) 这一步在新的架构里面已经做了
setTimeout setInterval清理（最好不用）可以使用nextTick代替
数据量多引起的内存占用严重，减少数据, 简化vue实例对象的数据量，减少内存开销
vue是单页面，页面路由切换后，内存未释放
如果在mounted/created 钩子中使用了 $o n ，需要在 b e f o r e D e s t r o y 中做对应解绑 ($ off)处理
如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件，需要在beforeDestroy 中做对应解绑处理
如果在mounted/created 钩子中使用了第三方库初始化，需要在beforeDestroy 中做对应销毁处理
Vue官网讲解避免内存泄露 https://cn.vuejs.org/v2/cookbook/avoiding-memory-leaks.html (我们erp没有 Choices.js库，所以不存在)
闭包导致，比如事件处理回调，导致DOM对象和脚本中对象双向引用，这个时常见的泄漏原因
js实例用完未被清理
JavaScript 内存泄露： 1.意外的全局变量 2.被遗忘的计时器或回调函数 3.脱离 DOM 的引用 4.闭包