###
Vue 3 中使用 `ref`
获取 DOM
元素高度
在
Vue 3 中，可以通过组合式
API 提供的 `ref` 和生命周期钩子函数（如 `onMounted` 或 `nextTick`），来
获取 DOM
元素的高度。以下是具体的实现方法：
#### 实现代码示例
以下是一个完整的示例，展示如何通过 `ref`
获取 DOM
元素的高度。
```
javascript
<template>
<div ref="myElement">这是一个测试
元素</div>
</template>
<script>
import { ref, onMounted } from '
vue';
export default {
setup() {
const myElement = ref(null);
onMounted(() => {
if (myElement.value) {
const height = myElement.value.offsetHeight;
console.log('DOM
元素的高度:', height);
}
});
return {
myElement,
};
},
};
</script>
```
在这个例子中，定义了一个名为 `myElement` 的响应式引用变量，并将其绑定到模板中的 `<div>`
元素上[^1]。当组件挂载完成后，在 `onMounted` 钩子中访问该 DOM 节点并读取其 `offsetHeight` 属性以获得高度[^2]。
如果需要动态创建多个 DOM
元素，则可以采用如下方式处理多节点情况下的高度计算：
```html
<template>
<div class="container">
<h2 v-for="(item, index) in items" :key="index" ref="multiRefs">{{ item }}</h2>
</div>
</template>
<script>
import { ref, onMounted } from '
vue';
export default {
setup() {
const multiRefs = ref([]);
const items = ['项一', '项二', '项三'];
onMounted(() => {
multiRefs.value.forEach((el) => {
if (el) {
console.log('当前 h2
元素的高度:', el.offsetHeight);
}
});
});
return {
multiRefs,
items,
};
},
};
</script>
```
在此场景下，我们利用数组形式存储所有的 `ref` 值，并遍历这些值逐一提取它们的高度属性[^2]。
#### 关键知识点解析
- **`ref` 绑定单个 DOM
元素**: 当前实例会自动将指定名称赋给对应的真实 DOM 对象。
- **`onMounted` 生命周期钩子**: 只有等到整个虚拟 DOM 渲染完成之后才能安全地操作真实 DOM 结构。
- **`offsetHeight` 属性**: 它表示某个特定 HTML
元素的内容区域加上上下边框和内边距后的像素高度。
#### 注意事项
为了确保能够成功取得目标 DOM
元素及其尺寸数据，请务必确认相关逻辑被放置于恰当的时间点执行——即至少是在首次渲染结束以后再尝试访问实际存在的 DOM 节点。
本文介绍了一种在项目中直接展示代码块的方法，并演示了如何通过JavaScript调整代码块的显示方式，使其更具可读性。
扫一扫
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
