该API可以监听元素内容区域边框的改变,内容区域不包括padding
    示例:以下示例通过观察 box 的宽度变化从而改变其边框圆角半径。

    1. const resizeObserver = new ResizeObserver(entries => {
    2. for (let entry of entries) {
    3. entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
    4. }
    5. });
    6. resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

    三个方法
    image.png

    应用: vueuse中 useElementSize 使用了该API

    MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver