ResizeObserver 是一个现代的 JavaScript API，用于监听元素大小的变化。它可以观察元素的内容区域或边界框的变化，并在发生变化时执行相应的回调函数。下面是 ResizeObserver 的基本用法示例：
// 创建一个 ResizeObserver 实例
const observer = new ResizeObserver((entries) => {
// 处理元素大小变化的回调函数
entries.forEach((entry) => {
// 获取变化的元素
const target = entry.target;
// 获取元素的新大小
const { width, height } = entry.contentRect;
// 在这里处理元素大小变化后的逻辑
// 可以根据新的大小调整布局、重新渲染等操作
});
});
// 监听特定的元素
const targetElement = document.getElementById('myElement');
observer.observe(targetElement);
// 停止监听
// observer.unobserve(targetElement);
在上述代码中，首先我们创建了一个 ResizeObserver 实例，并传入一个回调函数作为参数。回调函数会在被观察的元素大小发生变化时被调用，它接收一个参数 entries，其中包含了所有发生变化的元素及其相关信息。
然后，我们通过调用 observe 方法，将要观察的元素传递给 ResizeObserver 实例，以开始监听元素的大小变化。你可以传递单个元素或使用类似选择器的方法选择多个元素。
最后，当你不再需要监听元素大小变化时，可以使用 unobserve 方法停止观察特定的元素。
需要注意的是，ResizeObserver 是一个相对较新的 API，支持程度可能因浏览器版本而异。为了确保兼容性，建议在使用之前检查浏览器的支持情况。
