我在 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 },
{ path: '/user/bar', component: bar }
]
});
const app = new Vue({ router }).$mount('#app');
有两种方法可以解决这个问题:
正确清理室内destroy
hook
如果您使用任何外部事件侦听器,例如setInterval
, addEventListener
等你还需要注销当你的组件被破坏时它们,例如:
{
name: '...',
template: '...',
data() {
return {
interval: undefined,
timeout: undefined
};
},
mounted() {
interval = setInterval(() => {console.log('Instance ' + this._uid + ' of myself is running')}, 500);
timeout = setTimeout(() => {console.log('Instance ' + this._uid + ' of myself is running')}, 500);
document.addEventListener('click', this.onOutsideClick);
},
beforeDestroy() {
// Cleanup interval
clearInterval(interval);
// Cleanup any pending timeouts
clearTimeout(timeout);
// Cleanup any event listeners outside the root of the element
document.removeEventListener('click', this.onOutsideClick);
},
methods: {
onOutsideClick() {
...
}
}
}
使用 keep-alive 使组件保持活动状态
使用 keepalive 时,Vue 会缓存您的组件,并使其在后台保持活动状态,这意味着只有一个实例存在。如果您有大量路线,这可能会消耗更多内存
<keep-alive>
<router-view></router-view>
</keep-alive>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)