关于监听浏览器窗口大小的一些记录

过程

由于需要在vue项目中使用echarts图表，基于canvas的echarts不能随窗口大小改变而改变。这时就需要监听窗口大小，并实时执行echarts的resize方法。

1. 向 Window 对象添加事件句柄

mounted() {
  window.addEventListener('resize', this.resizeHandler)
},
destroyed() {
  window.removeEventListener('resize', this.resizeHandler)
},
methods:{
  resizeHandler(){
    // do something
  }
}

2. 在 window 的onresize中挂载方法

watch: {
  screenWidth(val) {
    // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    if (!this.timer) {
      // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
      this.screenWidth = val
      this.timer = true
      const that = this
      setTimeout(function() {
        // 打印screenWidth变化的值
        console.log(that.screenWidth)
        that.timer = false
        // do something
      }, 400)
    }
  }
},
mounted () {
  // 监听页面大小变化
  const that = this
  window.onresize = () => {
    return (() => {
      window.screenWidth = document.body.clientWidth
      that.screenWidth = window.screenWidth
    })()
  }
}

这种方法略显臃肿，而且data里还需要额外维护两个变量

3. 使用 resize-observer-polyfill 监听dom大小变化

这个方法相比于前两个只能监听window大小变化，它可以监听元素大小变化。可以对页面中一些可变元素进行响应，使用方法来自element-ui源码，感谢这位老哥的发现：使用element-ui封装好的resize事件方法

使用代码转自这位老哥：

//先引入
//如果项目使用了element-ui，可以直接引用，或者copy一份放在自己的代码里
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';

export default {
  mounted(){
    //可以在mounted这个钩子里初始化事件
    addResizeListener(this.$el, this.resizeListener);
  },
  methods:{
    resizeListener(){
      //do something
    }
  },
  //生命周期结束时销毁事件
  destroyed() {
    if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
  }
}

整理

在整个过程中，跟着源码看到了不少东西，不过没有系统性的去学习，只是大概了解了一下，这里做个整理

Polyfills or Ponyfills?
echarts官网 （在2021.1.28明天，echarts出新版本了。我看了一下，除了canvas，也有用svg渲染的图）
resize-observer-polyfill