<think>我们正在使用
Vue 3和TypeScript，需要
获取DOM
元素的高度。根据引用[
3]，有几种方式可以
获取DOM
元素。但是，引用[
3]提到的方式（使用getCurrentInstance）并不推荐，因为它比较麻烦且类型不安全。
在
Vue 3中，推荐使用`
ref`来
获取DOM
元素。我们可以通过以下步骤实现：
1
. 在模板中，给需要
获取高度的
元素添加一个
ref属性，例如：`
ref="myElement"`
2
. 在组件的`setup`函数或`<script setup>`中，使用`
ref`函数创建一个同名的
ref对象，初始值为`null`（注意：在TypeScript中，我们需要指定类型为`HTMLElement | null`）
3. 在生命周期钩子（如`onMounted`）或需要的时候访问这个
ref对象，通过其`value`属性
获取DOM
元素，然后使用`clientHeight`或`offsetHeight`等属性
获取高度。
下面是一个示例代码：
```
vue
<template>
<div
ref="myElement">需要
获取高度的
元素</div>
</template>
<script lang="ts">
import { defineComponent,
ref, onMounted } from &#
39;
vue&#
39;
export default defineComponent({
setup() {
// 创建一个
ref来存储
元素，类型为HTMLElement或null
const myElement =
ref<HTMLElement | null>(null)
onMounted(() => {
// 在挂载后，myElement
.value就是DOM
元素
if (myElement
.value) {
const height = myElement
.value
.clientHeight
console
.log(&#
39;
元素高度:&#
39;, height)
}
})
return {
myElement // 必须返回，模板才能关联
}
}
})
</script>
```
或者，如果你使用`<script setup>`语法糖（更简洁）：
```
vue
<template>
<div
ref="myElement">需要
获取高度的
元素</div>
</template>
<script setup lang="ts">
import {
ref, onMounted } from &#
39;
vue&#
39;
const myElement =
ref<HTMLElement | null>(null)
onMounted(() => {
if (myElement
.value) {
const height = myElement
.value
.clientHeight
console
.log(&#
39;
元素高度:&#
39;, height)
}
})
</script>
```
注意：
- 我们使用`
ref`函数创建了一个响应式引用`myElement`，并指定了它的类型为`HTMLElement | null`（因为初始值为null，当
元素挂载后，它会被赋值为实际的DOM
元素）。
- 在`onMounted`生命周期钩子中，我们确保
元素已经挂载，然后通过`myElement
.value`访问DOM
元素。
- 使用`clientHeight`
获取元素的高度（包括内边距，但不包括边框、外边距和滚动条）。如果需要包括边框和外边距等，可以使用`offsetHeight`，具体根据需求选择。
另外，引用[
3]还提到了其他方式，但使用`
ref`是最直接和推荐的方式。
**相关问题：**
1
. 在
Vue 3中，如何监听
元素高度的变化？
2
. 除了`clientHeight`和`offsetHeight`，还有哪些属性可以
获取元素尺寸？
3. 在
Vue 3的Composition API中，如何
获取多个DOM
元素？</think>在
Vue 3 中使用 TypeScript
获取 DOM
元素高度，推荐使用 Composition API 的 `
ref` 方式。以下是具体实现方法：
### 推荐方式：使用模板引用（Template
Ref）
```
vue
<template>
<div
ref="targetElement">需要测量高度的
元素</div>
</template>
<script setup lang="ts">
import {
ref, onMounted } from &#
39;
vue&#
39;
// 1
. 创建与模板同名的
ref（类型为 HTMLElement | null）
const targetElement =
ref<HTMLElement | null>(null)
// 2
. 在组件挂载后
获取高度
onMounted(() => {
if (targetElement
.value) {
const height = targetElement
.value
.clientHeight //
获取可见高度
// 或使用 offsetHeight（包含边框）或 scrollHeight（包含溢出内容）
console
.log("
元素高度:", height)
}
})
</script>
```
### 备选方式：使用 getCurrentInstance（不推荐）
```
vue
<script setup lang="ts">
import { getCurrentInstance, onMounted } from &#
39;
vue&#
39;
onMounted(() => {
const instance = getCurrentInstance()
if (instance) {
const el = instance
.refs
.myElement as HTMLElement
console
.log("高度:", el
.clientHeight)
}
})
</script>
<template>
<div
ref="myElement">目标
元素</div>
</template>
```
### 关键说明：
1
. **类型声明**：使用 `
ref<HTMLElement | null>(null)` 确保 TypeScript 类型安全
2
. **生命周期**：必须在 `onMounted` 或之后
获取，确保 DOM 已渲染
3. **高度属性**：
- `clientHeight`：可见内容高度（含内边距）
- `offsetHeight`：包含边框和滚动条
- `scrollHeight`：包含溢出内容的高度
4
. **响应式更新**：如需动态监听高度变化，可结合 `ResizeObserver`
### 最佳实践建议：
```typescript
// 封装为可复用函数
import {
Ref } from &#
39;
vue&#
39;
export function useElementHeight(el
Ref:
Ref<HTMLElement | null>) {
const height =
ref(0)
onMounted(() => {
watchEffect(() => {
if (el
Ref.value) {
height
.value = el
Ref.value
.clientHeight
}
})
})
return { height }
}
// 组件内使用
const { height } = useElementHeight(targetElement)
```
> ⚠️ 注意：避免在 `setup` 中直接操作 DOM，应通过生命周期钩子访问
---
### 相关问题
1
. Vue 3 中如何监听 DOM
元素尺寸变化？
2
. TypeScript 如何为自定义 DOM 操作定义类型？
3. Composition API 和 Options API
获取 DOM 有何区别？
4
. 如何
获取动态生成的组件内部
元素高度？
5
. Vue 3 中使用 `ResizeObserver` 的最佳实践是什么？
[^1]:
Vue3 TypeScript 集成指南
[^2]: Composition API 最佳实践
[^
3]:
Vue3 DOM 操作官方文档
订阅专栏 解锁全文
扫一扫
3524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
