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)
      }
    }
  }

通過監聽當前路由的改變來銷毀，這樣就不會影響緩存，寫代碼也方便