vue3实时获取div的宽和高方法（附：实例代码）

在Vue 3中获取一个div元素的宽度和高度，可以使用Vue的响应式API如`ref`和Vue生态系统中的实用库如`@vueuse/core`中的`useResizeObserver`来监听元素尺寸的变化。以下是使用`ref`和`useResizeObserver`的示例：

<template>
  <div ref="myDiv" class="your-class">Hello, world!</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useResizeObserver } from '@vueuse/core';

const myDiv = ref(null);

onMounted(() => {
  // 使用useResizeObserver来监听元素尺寸变化
  const resizeObserver = useResizeObserver(myDiv);

  // 当元素尺寸发生变化时，resizeObserver.value会包含最新的尺寸信息
  resizeObserver.value.width; // 获取宽度
  resizeObserver.value.height; // 获取高度

  // 也可以添加一个watcher来实时获取宽高
  watch(resizeObserver, (newSize) => {
    console.log('Width:', newSize.width);
    console.log('Height:', newSize.height);
  });
});
</script>

如果没有使用`@vueuse/core`，在Vue 3中也可以通过原生DOM API在DOM元素渲染完成后获取元素尺寸：

<template>
  <div ref="myDiv" class="your-class">Hello, world!</div>
</template>

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

const myDiv = ref(null);

onMounted(() => {
  // 确保在DOM更新完毕后再获取尺寸
  setTimeout(() => {
    if (myDiv.value) {
      const width = myDiv.value.clientWidth;
      const height = myDiv.value.clientHeight;

      console.log('Width:', width);
      console.log('Height:', height);
    }
  });
});
</script>

在这两种方法中，`ref`用于绑定到模板中的DOM元素，当元素挂载到DOM树后，可以通过`ref`所引用的DOM元素获取其实际的宽度和高度。`onMounted`生命周期钩子确保这些操作在组件渲染完成后执行。使用`useResizeObserver`的优势在于，它能实时监听元素尺寸变化，而不只是初次获取尺寸。