<think>嗯，用户问的是
Vue3中如何
获取DOM元素。我记得在
Vue2里是用ref然后通过this
.$refs来访问的，但
Vue3用了Composition API，可能方法有变化。首先，我需要确认在
Vue3中ref的用法是否不同了。对的，
Vue3的setup函数里不能直接使用this，所以原来的this
.$refs不再适用。
那应该怎么处理呢？对了，
Vue3中引入了新的ref函数，可以用来创建响应式引用，同时也可以用在模板上
获取DOM元素。用户可能需要在模板里给元素添加ref属性，然后在setup函数中使用同名的ref变量来访问。比如，在模板里写<div ref="myDiv">，然后在setup里用const myDiv = ref(null)，这样应该就能拿到对应的
DOM节点了。
不过要注意生命周期的问题，因为
DOM元素在组件挂载之后才能访问。所以可能需要在onMounted钩子中操作，确保元素已经渲染完成。比如在onMounted里访问myDiv
.value就能
获取到实际的
DOM元素了。
另外，用户可能还会问到在组合式API中如何处理多个ref的情况，或者使用函数形式的ref。比如，当在v-for循环中动态绑定ref时，可能需要一个数组来保存这些引用，或者使用函数来动态处理每个元素的ref。
还有TypeScript的支持，
Vue3的ref可能需要指定类型，比如ref<HTMLElement | null>(null)，这样类型检查会更准确，避免可能的错误。
可能还需要提醒用户，避免过度使用ref直接操作
DOM，尽量用
Vue的数据驱动方式。但某些场景下确实需要直接操作
DOM，比如集成第三方库、测量元素尺寸等，这时候就需要正确使用ref来
获取DOM节点。
总结步骤的话，应该分几点：模板中定义ref属性，setup中创建对应的ref变量，生命周期钩子中访问，以及注意事项。同时举例说明，比如
获取输入框焦点这样的常见用例，这样用户更容易理解。
还要检查是否有其他方法，比如使用getCurrentInstance，但通常不推荐，因为
Vue3更推荐使用Composition API的方式。所以重点还是放在ref的使用上。
最后，确保回答结构清晰，分步骤说明，并提供示例代码，这样用户能一步步跟着操作。同时提醒常见的注意事项，比如null初始值、生命周期时机等，避免用户遇到问题。</think>在
Vue3 中
获取 DOM 元素的步骤如下（使用 Composition API）：
1
. **模板中定义 ref 属性**
```html
<template>
<!-- 单个元素 -->
<div ref="myDiv">元素</div>
<!-- 列表元素 -->
<ul>
<li v-for="item in list" :ref="setItemRef">{{ item }}</li>
</ul>
</template>
```
2
. **setup 中声明响应式引用**
```typescript
import { ref, onMounted } from &#
39;
vue&#
39;
setup() {
// 单个元素
const myDiv = ref<HTMLElement | null>(null)
// 列表元素
const itemRefs = ref<HTMLElement[]>([])
const setItemRef = el => {
if (el) itemRefs
.value
.push(el)
}
onMounted(() => {
// 访问单个元素
console
.log(myDiv
.value?
.textContent) // 输出：元素
// 访问列表元素
console
.log(itemRefs
.value[0]
.textContent)
// 操作
DOM（示例：聚焦输入框）
if (inputRef
.value) inputRef
.value
.focus()
})
return { myDiv, setItemRef }
}
```
3. **组合式 API 的特殊情况处理**
- 动态 ref 名称：使用 `:ref` + 函数形式
- 组件 ref：
获取的是组件实例，需通过 `$el` 访问根
DOM
```typescript
const childComponent = ref()
onMounted(() => {
console
.log(childComponent
.value
.$el)
})
```
**注意事项**：
1
. 初始值为 `null`，
DOM 在挂载后才可用
2
. 列表元素需要使用函数形式收集 ref
3. 模板引用变量名必须与响应式变量名一致
4
. 建议配合 TypeScript 使用类型声明
5
. 优先使用数据驱动，避免直接
DOM 操作
**典型应用场景**：
- 第三方库集成（如图表库）
- 焦点控制
- 滚动位置管理
- 元素尺寸测量
- 动画库对接
完整示例（输入框自动聚焦）：
```html
<template>
<input ref="inputRef" type="text">
</template>
<script setup lang="ts">
import { ref, onMounted } from &#
39;
vue&#
39;
const inputRef = ref<HTMLInputElement | null>(null)
onMounted(() => {
inputRef
.value?
.focus()
})
</script>
```
本文讲述了在Vue项目中使用manco.editor时，如何通过`toRaw`获取编辑器内容以避免getValue的问题。同时，强调了在条件渲染中选择使用`v-show`而非`v-if`，因为后者会重置DOM影响组件状态。
扫一扫
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
