vue3动态获取盒子高度

在Vue3中，可以使用`ref`和`onMounted`来动态获取盒子高度。具体步骤如下：

1. 在模板中使用`ref`给盒子元素命名

<template>
  <div class="box" ref="box"></div>
</template>

2. 在组件中导入`ref`和`onMounted`

import { ref, onMounted } from 'vue'

3. 在组件中使用`ref`创建一个响应式对象来引用盒子元素

export default {
  setup() {
    const box = ref(null)
    // ...
  }
}

4. 在`onMounted`生命周期钩子函数内，使用`clientHeight`获取盒子高度

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

    onMounted(() => {
      console.log(box.value.clientHeight)
    })

    return {
      box
    }
  }
}

完整代码如下：

<template>
  <div class="box" ref="box"></div>
</template>

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

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

    onMounted(() => {
      console.log(box.value.clientHeight)
    })

    return {
      box
    }
  }
}
</script>

<style>
.box {
  width: 200px;
  height: 300px;
  background-color: pink;
}
</style>