vue后台项目，销毁屏幕监听的全局事件 window.addEventListener('resize', this.resetResize)

在这里踩到到了两个坑

1. 直接使用了window.addEventListener('resize', () => { console.log('hi') this.myEchart.resize() })

2. 这是vue后台系统用的element组件的侧边栏，会自动缓存页面，切换页面不会销毁页面

第一个坑

这样直接写在监听事件里面，到时候销毁的时候，使用window.removeEventListener("resize", () => { this.myEchart.resize() })是销毁不了这个事件的

所以要这样使用

因为监听要是一个函数所以this.resetResize,不能带（）

第二个坑

这是vue后台系统用的element组件的侧边栏，会自动缓存页面，切换页面不会销毁页面

方法一

<keep-alive :exclude="['a', '组件名']">
  <router-view :key="key" />
</keep-alive>

把这个当前的组件缓存去掉

但是我不喜欢这个方法，会去掉缓存切换页面时又要重新加载，影响性能

方法二

watch: {
    //如果$route.fullPath改变了，就是从当前页面离开了，就销毁掉全局的监听事件，不然这全局事件会一直存在，造成内存泄漏！
    '$route.fullPath': {
      handler() {
        window.removeEventListener("resize", this.resetResize)
      }
    }
  }

通过监听当前路由的改变来销毁，这样就不会影响缓存，写代码也方便