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

过程

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

向 Window 对象添加事件句柄

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

在 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 里还需要额外维护两个变量

使用 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);
  },
};

使用 vueuse 中的 useresizeobserver(2022-12-15)

时过境迁，使用 vueuse 变得非常方便，在需要调用一些浏览器原生方法时，vueuse 往往是个很好的选择。
https://vueuse.org/core/useresizeobserver/#useresizeobserver

整理

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

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