監聽window窗口變化的兩種方法

根據窗口變化，改變頁面展示需求還是很常見（如圖片自適應、echarts自適應問題），以在vue中的使用舉例

一、方法介紹

方法一：使用window的onresize屬性 -- window.onresize = reportWindowSize

1、mounted注冊事件

mounted() {
    // 注冊事件 -- 防抖
    window.onresize = () => {
      if (!this.bAntiShike) {
        this.bAntiShike = true
        setTimeout(() => {
          this.getWidth()
          this.bAntiShike = false
        }, 300)
      }
    }
  }

2、beforeDestroy注銷事件

beforeDestroy() {
    // 事件注銷
    window.onresize = null
}

方法二：將視圖事件resize注冊到window進行監聽 -- window.addEventListener('resize', reportWindowSize);

1、mounted注冊事件

mounted() {
  // 注冊事件 --onWindowResize中做防抖處理，同window.onresize
  window.addEventListener('resize', this.onWindowResize)
}

2、beforeDestroy注銷事件

beforeDestroy() {
    // 事件注銷
    window.removeEventListener('resize', this.onWindowResize)
}

注：參數reportWindowSize表示的是函數的引用 

二、注意事項

1、window.onresize與window.removeEventListener綁定相同的事件，都會觸發；

2、window.onresize 不能重復綁定事件，只有最后綁定的事件生效；

     window.removeEventListener('resize', reportWindowSize)可以重復綁定事件，當窗口改變后，所有綁定的事件都會觸發。

3、注意防抖

4、谷歌bug會觸發兩次窗口變化事件，用防抖可解決該問題

// 注冊事件 -- 防抖
    window.onresize = () => {
      if (!this.bAntiShike) {
        this.bAntiShike = true
        setTimeout(() => {
          this.resizeHandler()
          this.bAntiShike = false
        }, 300)
      }
    }
    // 下面兩個事件都會觸發
    window.addEventListener('resize', this.testN)
    window.addEventListener('resize', this.testNN)