监听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)