【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=