ResizeObserver构造函数必须传入回调函数，否则报TypeError；监听目标须为已挂载DOM元素；contentRect仅含content box尺寸；需手动调用unobserve或disconnect清理，避免内存泄漏。
ResizeObserver 构造函数必须传回调函数
不传 callback 会直接报错：TypeError: Failed to construct 'ResizeObserver': 1 argument required, but only 0 present。它不像 IntersectionObserver 那样支持无参构造后手动绑定。
正确写法是立即传入一个函数，该函数接收两个参数：entries（ResizeObserverEntry 数组）和可选的 observer 实例本身：
const ro = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log('宽：', entry.contentRect.width);
console.log('高：', entry.contentRect.height);
}
});
监听目标必须是已挂载的 DOM 元素
ResizeObserver 不会自动等待元素出现，如果传入 null、undefined 或尚未插入文档的节点（比如刚 document.createElement('div') 但没 appendChild），会静默失败——既不报错，也不触发回调。
- 确保调用
ro.observe(target)前，target已存在于document中 - 动态创建的元素建议在
append后立刻 observe，不要依赖后续事件“再观察” - 若目标由框架（如 React/Vue）控制，需在
useEffect/mounted钩子中执行 observe
contentRect 是只读对象，且不含滚动或边框尺寸
entry.contentRect 返回的是一个只读的 DOMRectReadOnly 对象，包含 width、height、top、left 等字段，但它反映的是 content box 尺寸（即 box-sizing: content-box 下的宽高），不包括 padding、border、margin，也不受 transform 影响。
立即学习“前端免费学习笔记（深入）”；
常见误区：
- 误以为
contentRect.width等于element.offsetWidth—— 实际上后者含border和padding - 想监听滚动导致的可视区域变化？
ResizeObserver不管这个，得用scroll事件或IntersectionObserver - 需要包含 padding 的尺寸？可手动计算：
entry.contentRect.width + parseFloat(getComputedStyle(target).paddingLeft) + parseFloat(getComputedStyle(target).paddingRight)
停止监听要用 unobserve，不用时记得 disconnect
每个 ResizeObserver 实例会持续持有对观察目标的弱引用，不显式清理可能引发内存泄漏，尤其在单页应用频繁切换组件时。
- 移除某个目标：
ro.unobserve(target) - 清空全部目标：
ro.disconnect()—— 这不会销毁实例，之后还能重新observe - 组件卸载/元素销毁前务必调用
disconnect，否则回调仍可能执行（此时target可能已为null或被移除）
容易被忽略的一点：disconnect 后不能再调用 observe，除非新建实例。别指望它像事件监听器那样“重连”。
