vue-router始终创建一个新的Component实例 [英] vue-router creates always a new Component instance

问题描述

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

I found an issue in vue-router which triggers me a lot. Always when I switch between my routes, a new instance of the component is created. Further the old instances are not deleted and are running in background!

我希望当我打开一个路由时，旧组件将被销毁或停止运行。

I would expect that when I open a route, the old components will be destroyed or stop running.

是否有解决该问题的解决方法？

Is there a workaround to fix that issue?

这是一个小提琴： 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');

推荐答案

有两种方法可以解决这个问题：

There are 2 ways to solve this problem:

如果你使用任何外部事件监听器，如 setInterval ， addEventListener 等，您还需要取消注册当你的组件被销毁时它们，例如：

If you use any outside event listeners, like setInterval, addEventListener, etc you also need to deregister them when your component gets destroyed, example:

{
    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缓存你的组件，并在后台保持它活着，这意味着只有一个实例存在。如果您有大量路线，这可能会消耗更多内存

Using keep-alive to keep the component alive

When using keepalive, Vue caches your component, and keeps it alive in the background, this means that only one instance will ever exists. This can potentially consume more memory if you have a large amount of routes

<keep-alive>
    <router-view></router-view>
</keep-alive>

这篇关于vue-router始终创建一个新的Component实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！