vue3获取div高度

在Vue 3中，你可以使用ref或者计算属性来动态获取`<div>`元素的高度。这里有两个例子：

**使用ref:**

<template>
  <div ref="myDiv">Hello</div>
</template>

<script>
export default {
  setup() {
    const myDivRef = ref(null);
    onMounted(() => {
      if (myDivRef.value !== null) {
        const height = myDivRef.value.offsetHeight; // 获取高度
        console.log(height);
      }
    });
    return { myDivRef };
  },
};
</script>

这里`ref`创建了一个响应式的变量`myDivRef`，然后在组件挂载后检查元素是否已加载并获取其高度。

**使用计算属性:**

<template>
  <div :style="{ height: computedHeight }"></div>
</template>

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

export default {
  setup() {
    const element = ref(null);

    const computedHeight = computed(() => {
      return element.value ? element.value.offsetHeight : null;
    });

    return {
      element,
      computedHeight,
    };
  },
};
</script>

在这个例子中，我们监听元素的变化，并通过计算属性`computedHeight`获取其实际高度。当元素存在时，显示其高度，否则为`null`。