vue3监听dom元素宽度变化

在 Vue 3 中，你可以使用 `resize-observer` API 来监听 DOM 元素的宽度变化。

首先，你需要安装 `resize-observer` 的依赖包：

npm install resize-observer

然后，在组件中使用 `onMounted` 钩子函数来初始化 `resize-observer`，并在 `onUnmounted` 钩子函数中清除它：

import { onMounted, onUnmounted } from 'vue'
import ResizeObserver from 'resize-observer'

export default {
  setup() {
    let width = 0

    const observeWidth = (el) => {
      const observer = new ResizeObserver((entries) => {
        width = entries[0].contentRect.width
      })
      observer.observe(el)
    }

    onMounted(() => {
      const el = document.getElementById('your-element-id')
      observeWidth(el)
    })

    onUnmounted(() => {
      const el = document.getElementById('your-element-id')
      const observer = el.__resizeObserver__
      observer.disconnect()
      delete el.__resizeObserver__
    })

    return {
      width,
    }
  },
}

在上面的示例中，我们使用 `ResizeObserver` 来监听元素的宽度变化，并将宽度的值保存到 `width` 变量中。在 `onMounted` 钩子函数中，我们初始化 `ResizeObserver` 并将其添加到元素上。在 `onUnmounted` 钩子函数中，我们清除 `ResizeObserver`。

最后，我们使用 `width` 变量来渲染组件。当元素的宽度发生变化时，`width` 变量也会更新，从而触发组件的重新渲染。