【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化

要监听 div 宽度的变化，可以使用 ResizeObserver 接口。ResizeObserver 允许你观察一个或多个元素的尺寸变化，并在发生变化时执行回调函数。这种方法比使用 MutationObserver 更专注于尺寸变化，且不受元素属性变化的影响。

使用 ResizeObserver

首先，创建一个 ResizeObserver 实例，并传入一个回调函数，该函数将在元素尺寸变化时被调用。在回调函数中，你可以访问每个观察到的元素的新尺寸。

const resizeObserver = new ResizeObserver(entries => {entries.forEach(entry => {const { width, height } = entry.contentRect;console.log(`Element resized: Width=${width}, Height=${height}`);});
});// 假设你想观察的元素是一个具有特定ID的div
const observedElement = document.querySelector('#yourDivId');// 开始观察该元素
resizeObserver.observe(observedElement);// 当需要停止观察时，可以调用 disconnect 方法
// resizeObserver.disconnect();

在 vue3 中的使用

const container = ref(null);
let observer;
let resizeTimer;onMounted(() => {createObserver();
});onUnmounted(() => {if (observer) {observer.disconnect();}
});function createObserver() {observer = new ResizeObserver((entries) => {clearTimeout(resizeTimer);resizeTimer = setTimeout(() => {for (const entry of entries) {const { width, height } = entry.contentRect;console.log(width);}}, 200);});observer.observe(container.value);
}

<div ref="container"></div>

注意事项

• ResizeObserver 是现代浏览器支持的 API，不是所有浏览器都支持。请确保你的目标浏览器支持此 API，或者使用 polyfill 来提供跨浏览器兼容性。
• ResizeObserver 只能观察到元素的尺寸变化，不能检测到元素的内容变化或内部布局变化。
• 如果你需要在元素的内容或布局变化时也触发事件，可能需要结合使用其他技术，如 MutationObserver。