每当我切换路线时,我注意到我的应用程序中的Vue组件永远不会被破坏,只会被创建(当我在路线之间切换时,#Deleted列始终为0)。更明确地说,创建的新组件数始终等于该路线上显示的组件数,即,当重新访问路线时,不会销毁任何Vue组件,并且会重新创建该路线上的每个组件。
我一直在研究调试问题,并且我知道以下通常是VueJS中内存泄漏的元凶。
我遇到的另一个潜在问题是我不太了解。在这个github线程中,OP关于VueJS中内存泄漏的潜在原因说了以下几点:
所以我确保我不会做任何愚蠢的事情,例如在Vuex商店中存储对此的引用...
有人可以解释一下OP对Vuex和内存泄漏的含义吗?
此外,还有哪些其他潜在问题导致我遗漏的VueJS中的内存泄漏可能会影响我的应用程序?
除了使用Chrome devtools中的“内存”标签以外,我还应该如何调试内存泄漏?
我在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)