ResizeObserver.observe()传null或未挂载元素会直接报错，而非静默失败；必须确保目标元素存在且为Element实例，否则抛出“Failed to execute 'observe' on 'ResizeObserver': The target must be an instance of Element”错误。
ResizeObserver 不是“监听窗口缩放”的替代品，它是专为监听单个元素 content-box 尺寸变化而生的——用错场景或传错参数，回调根本不会触发。
ResizeObserver.observe() 传 null 或未挂载元素会静默失败还是报错？
会直接抛出 Failed to execute 'observe' on 'ResizeObserver': The target must be an instance of Element 错误，不是静默失败。
- 常见于 Vue/React 中在
mounted或useEffect外提前调用ro.observe()，此时 DOM 节点还没生成 - 也常出现在动态 ID 查询（如
document.getElementById('chart-' + id)）但 ID 拼错或元素被条件渲染移除时 - 安全做法：先做存在性校验，再 observe ——
const el = document.querySelector('#my-box'); if (el) ro.observe(el);
为什么改了 padding/border 但 ResizeObserver 回调没执行？
因为 ResizeObserver 只响应 content-box 的宽高变化，不包含 padding、border、margin 或 transform 等非 layout 尺寸变更。
- 它监听的是元素内部可绘制区域的实际尺寸（即
entry.contentRect.width/height），等价于getBoundingClientRect()减去padding + border - 手动设置
padding: 20px→ content area 缩小 → 触发回调 ✅ - 手动设置
border: 2px solid→ content area 不变 → 不触发 ❌ -
transform: scale(1.2)或visibility: hidden→ layout 尺寸未变 → 不触发 ❌
Vue/React 组件卸载时忘记 disconnect 会导致什么？
内存泄漏 + 回调执行时报错 Cannot read property 'contentRect' of null 或访问已销毁 DOM 节点。
- React 中应在
useEffect清理函数里调用ro.disconnect() - Vue 2 在
beforeDestroy、Vue 3 在onBeforeUnmount中调用 - 注意：不要在回调里同步调用
ro.unobserve()或ro.observe()，可能漏触发；如需动态切换目标，先disconnect()再重建实例更稳妥
图表容器 resize 后 ECharts / Chart.js 不重绘？
原生 resize() 方法必须在图表实例初始化完成、且容器 DOM 已有有效尺寸后才能调用；仅靠 responsive: true 不足以应对运行时尺寸变更。
- ECharts：确保
echarts.init()成功返回实例后再observe().observe(container)，回调中用requestAnimationFrame(() => myChart.resize())避免 layout thrashing - Chart.js v2：需显式调用
chart.update()；v3+ 可直接chart.resize() - 如果容器初始
display: none或width: 0，图表 init 会拿到 0 尺寸，后续 resize 无效 —— 必须等容器可见且有 layout 尺寸后再 init
最容易被忽略的一点：ResizeObserver 的回调时机由浏览器 layout 阶段驱动，它不保证“每次 CSS 变更都立刻触发”，而是批量合并、节流处理。如果你依赖像素级实时响应（比如拖拽缩放预览），仍需结合 requestAnimationFrame 或手动节流逻辑补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
