监听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表示的是函数的引用