监听窗口以及DOM元素大小变化

1 监听浏览器窗口大小

window resize

• 监听对象：浏览器窗口大小变化

• 触发时机：用户调整浏览器窗口大小、设备旋转、开发者工具打开/关闭等

• 作用范围：全局窗口级别的变化

2 监听特定的DOM元素大小

 ResizeObserver

• 监听对象：特定DOM元素的大小变化

• 触发时机：被观察的DOM元素尺寸发生变化

• 作用范围：特定元素级别的变化 

为什么需要两者

1. window resize：当用户调整浏览器窗口大小时，需要重新计算组件尺寸

1. ResizeObserver：当折叠面板展开/收起时，组件的容器尺寸会发生变化，但浏览器窗口大小没有变化

用法

mounted() {
  // 监听浏览器窗口变化
  window.addEventListener('resize', this.resizeHandler);
  
  // 监听组件自身DOM尺寸变化（如折叠面板展开/收起）
  this.observeDOMChanges();
},
beforeDestroy() {
    window.removeEventListener('resize', this.debouncedResize);
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
 },

methods:{
    observeDOMChanges() {
      this.resizeObserver = new ResizeObserver(() => {
        this.$nextTick(() => {
          this.resizeHandler();
        });
      });
      
      if (this.$el) {
        this.resizeObserver.observe(this.$el);
      }
    },
}