js ResizeObserver 监听元素大小改变

在开发响应式页面时，经常需要监听元素的宽高，过去我使用window的resize事件来监听，但它只能监听到窗口的改变。 使用ResizeObserver可以监听一个或多个元素的大小变化。

const ele = document.querySelector('div');

const resizeObserver = new ResizeObserver(() => {
 console.log('元素尺寸发生更改')
})
// 监听元素
resizeObserver.observe(ele)
// 取消监听元素
resizeObserver.unobserve(ele)

回调函数接收两个参数，第一个是ResizeObserverEntry对象数组，包含了元素的尺寸信息，但实际上我们直接从元素获取也是一样的，第二个是对ResizeObserver实例自身的引用，但实际上直接从实例变量获取也是一样的，所以这两个参数基本没什么卵用。