ResizeObserver.observe()必须传入已挂载的Element节点，否则抛错；contentRect仅反映content-box尺寸；组件卸载时须手动disconnect()防内存泄漏；监听图表应选外层容器并节流resize调用。
ResizeObserver.observe() 必须传入已挂载的 Element 节点
如果 observe() 传入 null、undefined 或尚未插入 DOM 的元素（比如 Vue/React 组件中 ref 还未绑定），浏览器会直接抛错：Failed to execute 'observe' on 'ResizeObserver': The target must be an instance of Element。这不是静默失败，而是明确报错，但容易被忽略——尤其在 SSR 或异步组件里。
实操建议：
- 确保调用
observe()前，目标元素已真实存在于 DOM 中，例如在 Vue 的mounted、React 的useEffect(() => {}, [])或原生DOMContentLoaded后执行 - 不要依赖父容器“已经渲染”就认为子元素一定可查；动态插入的内容（如
innerHTML注入或appendChild）需等插入完成再observe() - 可在调用前加一层防护：
if (el && el.nodeType === 1) ro.observe(el)
contentRect 只反映 content-box 尺寸，不含 padding/border
entry.contentRect.width 和 entry.contentRect.height 永远只返回内容区域尺寸，与 box-sizing 设置无关。即使你设了 box-sizing: border-box 并给了 width: 300px; padding: 20px; border: 4px solid，contentRect.width 仍是 252（300 − 20×2 − 4×2），不是 300。
常见误判场景：
立即学习“前端免费学习笔记（深入）”；
- 用
contentRect值去计算带 padding 的布局位置 → 结果偏移 - 监听一个仅靠
padding扩展高度的空容器 →contentRect.height始终为0，不会触发回调 - 想检测 border 变更 → 它不触发，因为 border 不改变 content area
若需总占用尺寸（含 padding + border），应搭配 el.getBoundingClientRect() 使用，但注意它会强制同步 layout，慎用在高频回调中。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
React/Vue 中必须手动 disconnect()，否则内存泄漏
在组件卸载时，若未调用 ro.disconnect() 或 ro.unobserve(el)，ResizeObserver 实例仍持有对 DOM 节点的引用，且回调可能继续执行——此时节点已销毁，entry.target 可能为 null 或已无意义，极易引发 Cannot read property 'xxx' of null 类错误。
实操建议：
- React：在
useEffect的清理函数中调用ro.disconnect() - Vue 2：在
beforeDestroy钩子中调用；Vue 3：在onBeforeUnmount中调用 - 避免在回调里直接修改被观察元素的宽高（如
el.style.width = '200px'），否则可能触发新一轮 resize，形成隐式循环（虽有 lastReportedSize 缓存防抖，但逻辑仍脆弱）
监听图表容器时，必须用直接包裹层，且需节流
给 <canvas> 或 <svg> 本身注册 ResizeObserver 是无效的——它们通常没有显式宽高，尺寸由父容器决定；真正变化的是外层容器（如 <div id="chart-container">）。ECharts、Chart.js 等库的 resize() 方法也要求传入容器尺寸，而非 canvas 自身。
性能关键点：
- 高频拖拽或 CSS 动画可能导致连续触发，直接在回调里调用
myChart.resize()会卡顿 - 务必用
requestAnimationFrame包裹，确保每帧最多执行一次：requestAnimationFrame(() => myChart.resize()) - 不要多个图表共用同一个
ResizeObserver实例——entry 数组顺序不可控，不同图表的 resize 时机可能错乱
最易被忽略的一点：图表实例必须已初始化完成，才能调用 resize()。常见写法是先 echarts.init()，再 observe()，而不是反过来。
