监听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