前端监控容器大小ResizeObserver方法的使用

监控页面大小改变通常使用window.resize方法来进行监控

但有时是需要监控一些容器

    var ro = new ResizeObserver(
      this.throttle((entries) => {
      for (let entry of entries) {
        console.log("Element:", entries,entry);
        entry.target.__vue__.echarts.resize()
      }
    })
    );
    ro.observe(this.$refs.LineAndProgress1.$el);//可以监听多个对象
    ro.observe(this.$refs.LineAndProgress2.$el);
    throttle(fn) {//防抖
      let timer;
      return function (entries) {
        console.log("执行次数");
        if (timer) {
          return;
        }
        timer = setTimeout(() => {
          fn(entries)
          clearTimeout(timer);
          timer = null;
        }, 1000);
      };
    },

观察者模式，可以监听多个对象，某些需要监听dom大小变化的场景下很便利，还可以配合throttle/debounce进行性能优化。