切换路由时VueJS内存泄漏

时间:2018-07-18 11:03:02

标签: javascript vue.js memory-leaks vue-router vuex

每当切换路线时,我就会注意到应用程序中的Vue组件永远不会被破坏,只会被创建(当我在路线之间切换时,#Deleted列始终为0)。更明确地说,创建的新组件数始终等于该路线上显示的组件数,即,当重新访问路由时,不会销毁任何Vue组件,并且会重新创建该路线上的每个组件。

enter image description here

我一直在研究调试问题,并且我知道以下通常是VueJS中内存泄漏的元凶。

  • 使用全局事件总线,并且无法注销回调。 This is detailed clearly here。虽然我在应用程序的某些区域中确实使用了全局事件总线,但是我也没有在全局事件总线上创建任何事件侦听器的页面上遇到内存泄漏,这使我相信这不是问题在这里。
  • 使用第三方库时,您无法手动清理内存,此问题由VueJS documentation概述。再次,我一直在不使用第三方库的页面上查看内存使用情况,但仍在这些页面上遇到内存泄漏。

我遇到的另一个潜在问题是我不太了解。在此github thread中,OP关于VueJS中内存泄漏的潜在原因说了以下几点:

  

所以我确保我没有做任何愚蠢的事情,例如存储引用   在Vuex商店中做到这一点...

有人可以在此解释OP对Vuex和内存泄漏的含义吗?

此外,还有哪些其他可能导致我遗漏的VueJS内存泄漏的潜在问题可能会影响我的应用程序?

除了使用Chrome devtools中的“内存”标签以外,我还应该如何调试内存泄漏?

1 个答案:

答案 0 :(得分:1)

内存是如此难以调试,而且您的日志看起来与我的日志相似。

我发现对您的日志要小心: console.log(vuecompoent)实际上将您的组件存储在内存中,而不会释放它。

还可以考虑我也关闭了vue开发工具,但是我不确定这是否引起了问题。

查看“固定器”部分。这可能会给您一些见识。