在Vue 3的开发过程中，获取DOM节点是一项常见的操作。了解并掌握正确的获取DOM节点的方法，能极大地提升开发效率。下面将详细介绍几种在Vue 3中获取DOM节点的有效方式。

首先是使用ref来获取单个DOM节点。在模板中，给需要获取的DOM元素添加一个ref属性，然后在脚本中定义一个ref变量与之对应。例如：

<template>
  <div ref="myDivRef">这是一个div</div>
</template>

<script setup>
import { ref } from 'vue';
const myDivRef = ref(null);

// 这里可以通过myDivRef.value来访问对应的DOM节点
</script>

通过这种方式，在组件挂载完成后，myDivRef.value就会指向<div>元素，方便我们对该DOM节点进行操作，比如获取其尺寸、修改样式等。

如果要获取多个DOM节点，可以使用ref数组结合v-for指令。例如：

<template>
  <div v-for="(item, index) in items" :key="index" :ref="(el) => divRefs[index] = el">
    {{ item }}
  </div>
</template>

<script setup>
import { ref } from 'vue';
const items = ref([1, 2, 3]);
const divRefs = ref([]);
</script>

在上述代码中，divRefs是一个ref数组，每个元素对应一个v-for循环生成的DOM节点。通过这种方式，我们可以方便地操作多个DOM节点。

另外，还可以利用$el来获取根DOM节点。在基于setup语法糖的组件中，this指向undefined，但在普通组件中，this.$el会返回组件的根DOM节点。例如：

<template>
  <div>
    这是组件的内容
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$el);
  }
};
</script>

在mounted钩子函数中，this.$el就代表了组件的根DOM节点。

Vue 3提供了多种获取DOM节点的方法，开发人员可以根据实际需求选择合适的方式。熟练掌握这些方法，有助于更高效地完成项目开发，实现各种复杂的交互效果。