javascript - 切换路由时 VueJS 内存泄漏

Question

每当我切换路由时，我注意到我的应用程序中的 Vue 组件从未被销毁，而只是被创建(当我在路由之间切换时，#Deleted 列始终为 0)。更清楚地说，创建的新组件的数量始终等于该路由上显示的组件的数量，即没有任何 Vue 组件被销毁，并且在重新访问路由时重新创建路由上的每个组件。

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

• 使用全局事件总线和取消注册回调失败。 This is detailed clearly here .虽然我确实在我的应用程序的某些区域使用了全局事件总线，但我在没有在全局事件总线上创建任何事件监听器的页面上也遇到了内存泄漏，这让我相信这不是问题所在在这里。
• 在使用第 3 方库时无法自行手动清理内存，VueJS documentation 概述了这个问题.同样，我一直在查看不使用第三方库的页面上的内存使用情况，但我仍然在这些页面上遇到内存泄漏问题。

我还遇到了一个我不太明白的潜在问题。在这个github thread ，OP 就 VueJS 中内存泄漏的潜在原因说了以下内容:

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

有人可以解释一下 OP 在 Vuex 和内存泄漏方面的含义吗？

此外，还有哪些其他潜在问题会导致 VueJS 中的内存泄漏，我没有注意到这些问题可能会影响我的应用程序？

除了使用 Chrome devtools 中的“内存”选项卡之外，我还应该如何调试内存泄漏？

Answer 1

调试内存非常痛苦，而且您的日志看起来与我的日志非常相似。

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

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

查看固定器部分。这可能会让您有所了解。