在vue專案中需要監聽window視窗變化來時時計算圖片的高度，於是就加了一個監聽事件；確實監聽到了，但是在離開當前頁面進入其他頁面改變視窗大小時發現window還是處於監聽狀態，即移除監聽事件並沒有生效。

  //之前的寫法，這樣寫移除監聽事件無效
  mounted(){
    window.addEventListener('resize',()=>{
      '改變視窗大小時需要做的處理'
    });
  },beforeDestroy() {
    window.removeEventListener("resize");
  }

後來查詢相關資料後發現用下面這種寫法可以移除監聽

  methods: {
    listenResize(){
      '視窗大小改變時的操作'
    }
  },mounted(){
    window.addEventListener('resize',this.listenResize); 
  },beforeDestroy() {
    window.removeEventListener("resize",this.listenResize);
  }

補充知識：vue 監聽螢幕變化 & 銷燬監聽事件

記一次小坑.

由於用到 echarts 需要自適應螢幕,所以在vue中用了監聽事件並且考慮到效能問題,所以用lodash 庫的 debounce 做了包裹.程式碼如下:

mounted() {
  window.addEventListener('resize',debounce(this.resize,200),true)
},beforeDestroy() {
  window.removeEventListener('resize',this.resize,methods: {
  resize() {
   this.radarChart.resize()
  }
}

然而發現切換到其他的頁面的時候,螢幕改變的時候還是會觸發 resize 事件,因為之前寫過類似功能,程式碼是沒有問題的,但是就是會觸發,心裡也是覺得奇怪,研究了一下,發現 addEventListener 的方法裡面不加 debounce 就可以了.如下:

mounted() {
  window.addEventListener('resize',methods: {
  resize: debounce(function() {
   this.radarChart.resize()
  },300),}

debounce 需要加在 methods 裡面.並且內部函式體不能使用箭頭函式,否則會報 this undefined 的問題

以上這篇解決vue 給window新增和移除resize事件遇到的坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。