vue3监听dom元宽度变化

在Vue3中，如果你想监听DOM元素的宽度变化，你可以利用`ref`和`watch`特性来实现。首先，你需要创建一个`ref`来引用这个DOM元素：

<template>
  <div ref="myElement"></div>
</template>

<script setup>
import { ref } from 'vue';

const myElement = ref(null);
</script>

然后，在`setup`中，通过`watch`来监听`myElement.value.offsetWidth`的变化：

<script setup>
import { onMounted, watch } from 'vue';

onMounted(() => {
  // 初始值设置
  const initialWidth = myElement.value.offsetWidth;
});

watch(
  () => myElement.value.offsetWidth,
  (newWidth) => {
    console.log('宽度改变:', newWidth);
    // 在这里可以添加你的业务处理逻辑
  },
  { immediate: true } // 设置立即执行第一次
);
</script>

这样当元素的宽度发生变化时，`watch`回调就会被触发，并且初始值会立即计算一次。