监听window和dom元素的resize事件

监听window

window.addEventListener('resize', fn, false);

监听div元素

<script setup>
let resizeObserver = null;
onBeforeUnmount(() => {
    resizeObserver = new ResizeObserver(resizeFn);
    resizeObserver.observe(divElement);
})

onBeforeUnmount(() => {
    resizeObserver.unobserve(divElement);
    resizeObserver = null;
});

const resizeFn = () => {
    console.log('resize')
};
</script>

• window对象才有resize事件
• div元素没有resize事件，无法直接监听div的resize事件
• 监听dom元素resize，需要用MutationObserver

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变 ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。 它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。 如果（浏览器）遵循规范，只会在绘制前或布局后触发调用

MDN解释MutationObserver