切换路由时VueJS内存泄漏 [英] VueJS Memory Leak when Switching Routes

问题描述

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

Whenever I switch routes, I have noticed that Vue components in my application are never destroyed and only created (the # Deleted column is always 0 as I toggle between routes). To be extra clear, the number of new components created is always equal to the number of components displayed on that route i.e. NONE of the Vue components are ever destroyed and every component on the route is recreated when a route is revisited.

我一直在研究调试问题，并且我知道以下通常是VueJS中内存泄漏的罪魁祸首.

I've been researching to debug the problem and I know that the following are usually culprits of memory leaks in VueJS.

• 使用全局事件总线，并且无法注销回调. 在此处进行了详细说明.虽然我在应用程序的某些区域中确实使用了全局事件总线，但是我也没有在全局事件总线上创建任何事件侦听器的页面上遇到内存泄漏，这使我相信这不是问题所在在这里.
• 使用第三方库时，您无法手动清理内存，这是

• The use of a Global Event Bus and failure to unregister the callback. This is detailed clearly here. While I do use a Global Event Bus in some areas of my application, I'm also experiencing memory leaks on pages where I don't create any event listeners on the Global Event Bus, which leads me to believe that this is not the issue here.
• Failure to manually clean up memory yourself when using 3rd party libraries, a problem outlined by the VueJS documentation. Again, I've been looking at memory usage on pages that do not use third party libraries and I'm still getting memory leaks on those.

我遇到了另一个我不太了解的潜在问题.在此 github线程中，OP谈到了以下潜在的内存泄漏原因: VueJS:

There is one more potential issue I've come across which I don't quite understand. In this github thread, the OP said the following in regards to potential causes of memory leaks in VueJS:

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

So I made sure I wasn't doing anything stupid like storing a reference to this on a Vuex Store...

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

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

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

推荐答案

内存是如此难以调试，并且您的日志看起来与我的日志相似.

Memory is such a pain to debug and your logs look curiously similar to mine.

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

What i found was be careful of your logs : console.log(vuecompoent) actually stores your component in memory and does not release it.

还考虑我也关闭了vue开发工具，但是我不确定这是否是导致问题的原因.

Also consider that I turned off vue dev tools as well, but im not sure if this was causing the issue .

查看固定器"部分.这可能会给您一些见识.

Look into the retainers section . This may give you some insight.

这篇关于切换路由时VueJS内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！