在Vue 3的setup模式中，如何实现对一个div元素宽高的实时监测并更新？

在 Vue 3 的 setup 模式中，你可以通过监听窗口的 `resize` 事件以及使用响应式属性来实现对 div 元素宽高实时监测并更新。这里是一个简单的示例：

import { onMounted } from 'vue';

export default {
  setup() {
    const ref = ref({ width: 0, height: 0 }); // 使用ref包装初始值

    // 当组件挂载后开始监听窗口变化
    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    async function handleResize() {
      try {
        // 更新div的宽高值，例如获取DOM元素
        const divElement = document.querySelector('#yourDivId'); // 替换为实际div的选择器
        if (divElement) {
          ref.value.width = divElement.offsetWidth;
          ref.value.height = divElement.offsetHeight;
        }
      } catch (error) {
        console.error('Error updating dimensions:', error);
      }
    }

    // 通过返回ref对象，这个div的宽高信息就会成为响应式的
    return ref;
  },
}

// 在模板中使用ref
<template>
  <div :style="{ width: ref.width, height: ref.height }" id="yourDivId">内容</div>
</template>