vue3如何获得元素的宽高

在 Vue 3 中，可以使用 `ref` 和 `onMounted` 来获取元素的宽高。

首先，在模板中给元素设置 `ref` 属性：

<template>
  <div ref="myElement">这是一个元素</div>
</template>

然后，在 `setup` 函数中使用 `ref` 来获取元素的引用，并在 `onMounted` 钩子中获取元素的宽高：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const myElement = ref(null)

    onMounted(() => {
      const width = myElement.value.offsetWidth
      const height = myElement.value.offsetHeight
      console.log('元素的宽度：', width)
      console.log('元素的高度：', height)
    })

    return { myElement }
  }
}

在 `setup` 函数中，使用 `ref` 创建一个响应式的引用，并将其初始化为 `null`，然后在 `onMounted` 钩子中获取元素的宽高。需要注意的是，在 `onMounted` 钩子中，需要使用 `.value` 来获取 `ref` 的实际值。

这样，就可以在 Vue 3 中获取元素的宽高了。