记录vue中使用removeEventListener和beforeDestory的一个坑

项目中有一个el-table，需要根据电脑分辨率和浏览器窗口大小自动变更height，于是想到在mounted中创建监听。

mounted() {
      window.addEventListener('resize', this.windowResize)
      //windowResize为调整el-table高度的方法
    },

但在调试过程中发现网页越来越卡，原来是离开该页面的时候没有销毁监听，每次加载页面就会多一次监听，加载次数多了就会变卡，需要在beforeDestory中销毁该监听

beforeDestroy() {
      window.removeEventListener('resize', this.windowResize)
    },

结果发现无法销毁，一开始以为是removeEventListener的问题，有说是因为匿名函数无法销毁，有说要在this.windowResize后面加", true"，但都没有效果。后来仔细查了vue生命周期，怀疑运行的时候是不是根本没进到beforeDestory里。然后在控制台里打断点，果然没有运行这段代码。
网上查到是因为<keep-alive>标签导致beforeDestory没有被触发，

    <div class="app-wrapper" >
        <el-container>
            <el-aside width="60px" class="hidden-sm-and-down">
                <sidebar></sidebar>
            </el-aside>
            <el-container style="height: 100vh;width:1000px;max-height: 100vh">
                <el-header height="40px">
                    <navBar v-on:listenToChildEvent="showMsgFromChild"></navBar>
                </el-header>
                <el-main>
                    <transition name="fade" mode="out-in">
<!--                        <keep-alive>-->
                            <router-view :key="key"></router-view>
<!--                        </keep-alive>-->
                    </transition>
                </el-main>
            </el-container>
        </el-container>
    </div>

把<keep-alive>去掉就可以了
由于刚开始做项目，基础还不是很好，所以记录下来