相关疑难解决方法(0)

切换路由时VueJS内存泄漏

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

在此处输入图片说明

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

  • 使用全局事件总线以及无法注销回调。这在这里清楚地详细说明。虽然在应用程序的某些区域中确实使用了全局事件总线,但是我也没有在全局事件总线上创建任何事件侦听器的页面上遇到内存泄漏,这使我相信这不是问题所在这里。
  • 使用第3方库时无法手动清理内存,这是VueJS文档概述的问题。同样,我一直在不使用第三方库的页面上查看内存使用情况,但仍在这些页面上遇到内存泄漏。

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

所以我确保我不会做任何愚蠢的事情,例如在Vuex商店中存储对此的引用...

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

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

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

javascript memory-leaks vue.js vue-router vuex

6
推荐指数
1
解决办法
2702
查看次数

vue-router始终创建一个新的Component实例

我在vue-router中发现了一个问题,它引发了我很多.总是当我在我的路线之间切换时,会创建一个新的组件实例.此外,旧实例不会被删除并在后台运行!

我希望当我打开一条路线时,旧组件将被销毁或停止运行.

有解决方法来解决这个问题吗?

这是一个小提琴:https://jsfiddle.net/4xfa2f19/5885/

let foo = {
    template: '<div>Foo</div>',
    mounted() {
        console.log('Mount Foo with uid: ' + this._uid);
        setInterval(() => {console.log('Instance ' + this._uid + ' of Foo is running')}, 500);
    }
};

let bar = {
    template: '<div>Bar</div>',
    mounted() {
        console.log('Mount Bar with uid: ' + this._uid);
        setInterval(() => {console.log('Instance ' + this._uid + ' of Bar is running')}, 500);
    }
};


const router = new VueRouter({
    routes: [
        { path: '/user/foo', component: foo }, …
Run Code Online (Sandbox Code Playgroud)

javascript routing vue.js vue-router

3
推荐指数
1
解决办法
3142
查看次数

标签 统计

javascript ×2

vue-router ×2

vue.js ×2

memory-leaks ×1

routing ×1

vuex ×1