场景：

在vue项目正常情况，我们都知道开启的定时器setInterval、监听器watch、eventBus事件总线监听器、以及一些其他外部js的监听器，需要在beforeDestroy中卸载。如果没有进行卸载，那么他们相关回调函数使用的变量，就不会被卸载，最后很有可能会造成内存泄露的问题，也就是在这个页面一直访问，最后内存占满之后页面直接崩溃了。

但有的时候我们在beforeDestroy也对这些定时器监听器什么的进行了卸载删除，但是刷新页面之后内存还是一直增加，只有关闭页面内存才真正被释放了。

说明：

针对这个问题，在网上查看了很多资料，最后发现，刷新页面的时候，vue的组件生命周期beforeDestroy和destroyed都没有被触发，所以清除定时器的api也就没有被执行，相关依赖的变量、内存也就没有被释放。

解决办法：

考虑到我很多组件都是用了定时器、监听器和事件总线。我在app.vue里面执行了v-if操作，当监听到用户执行刷新的操作时，将v-if的值改为false，组件就会触发beforeDestroy。

app.vue。代码：

<template>
<div class="body">
    <div v-if="isShow">
        <router-view />
    </div>
</div>
</template>

    data () {
        return {
            isShow:false,
        };
    },

    mounted () {
        window.addEventListener("beforeunload",(e)=> {
            console.log('刷新');
            this.isShow=false;
            window.removeEventListener('beforeunload', ()=>{})//移除这个监听
        });
    },