写一个方法监听DOM宽高的变化

有多种方法可以监听 DOM 元素宽高的变化，以下是几种常见且有效的方法：

1. ResizeObserver (推荐)

ResizeObserver 是监听元素尺寸变化的现代化 API，兼容性良好，性能出色。它可以监听元素内容区域、边框框、以及 padding 区域的变化。

const element = document.getElementById('myElement');

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { contentRect } = entry;
    console.log('Element size changed:', contentRect.width, contentRect.height);
    // 在这里执行你想要的操作，例如重新布局或更新相关数据
  }
});

resizeObserver.observe(element);

// 可选：停止监听
// resizeObserver.unobserve(element);
// resizeObserver.disconnect(); // 停止监听所有元素

2. getBoundingClientRect() + requestAnimationFrame (对于需要高性能的场景)

getBoundingClientRect() 方法可以获取元素的位置和尺寸信息。结合 requestAnimationFrame 可以优化性能，避免过度绘制。

const element = document.getElementById('myElement');
let lastWidth = element.getBoundingClientRect().width;
let lastHeight = element.getBoundingClientRect().height;

function checkSizeChanges() {
  const { width, height } = element.getBoundingClientRect();
  if (width !== lastWidth || height !== lastHeight) {
    console.log('Element size changed:', width, height);
    // 执行相关操作
    lastWidth = width;
    lastHeight = height;
  }
  requestAnimationFrame(checkSizeChanges);
}

requestAnimationFrame(checkSizeChanges);

3. MutationObserver (监听属性变化)

虽然 MutationObserver 主要用于监听 DOM 结构的变化，但也可以用来监听元素属性的变化，例如 style 属性，从而间接地监听宽高变化。不过，这种方法不如 ResizeObserver 直接和高效。

const element = document.getElementById('myElement');

const observer