ResizeObserver 实现响应式组件
ResizeObserver 与 window resize 事件有何区别？如何用 ResizeObserver 监听特定元素的尺寸变化实现自适应布局？borderBoxSize 和 contentBoxSize 有什么区别？
回答
我还是少年
ResizeObserver 监听单个元素的尺寸变化，而非 window。与 resize 事件核心区别：1) 元素级别而非视口级别；2) 可同时监听多个元素；3) 在元素初始布局完成后就会触发一次；4) 返回精确的尺寸信息。使用: new ResizeObserver(entries => entries.forEach(e => {const {blockSize, inlineSize} = e.borderBoxSize[0]}))。borderBoxSize 包含 border 和 padding，contentBoxSize 只含内容区域。devicePixelContentBoxSize 可获取物理像素尺寸。常见场景：自适应容器内的图表/Canvas 重绘、虚拟列表动态高度、textarea 自动增高。注意：回调中修改被监听元素可能引起无限循环，应加防抖或条件判断。