Vue3 中获取 DOM 节点的方法有哪些

在 Vue3 的开发过程中，获取 DOM 节点是一个常见的需求，它能帮助我们执行一些特定的操作，如操作元素的样式、获取元素的尺寸等。以下为您介绍几种常见的获取 DOM 节点的方法。

一、使用 ref 绑定

在 Vue3 中，使用 ref 可以方便地获取 DOM 节点。在模板中给需要获取的 DOM 元素添加一个 ref 绑定，然后在脚本中定义一个 ref 变量来接收该节点。

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

<script setup>
import { ref } from 'vue';

const myDivRef = ref(null);

// 在需要的时候访问 DOM 节点
console.log(myDivRef.value);
</script>

在上述代码中，myDivRef 初始值为 null，在组件挂载完成后，myDivRef.value 就会指向对应的 DOM 节点。

二、使用 $el 属性

在 Vue 组件实例中，可以通过 $el 属性访问组件的根 DOM 节点。不过这种方法通常用于在组件内部获取根节点。

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

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log(this.$el); // 输出组件的根 DOM 节点
});
</script>

需要注意的是，$el 在 setup 中不能直接使用 this.$el，可以通过 getCurrentInstance 来获取当前组件实例，进而访问 $el，但这种方式已经逐渐不推荐使用。

三、使用 document.querySelector 或 document.getElementById

虽然 Vue 提倡数据驱动的开发方式，但在某些情况下，直接使用原生的 DOM 操作方法也是可行的。

<template>
  <div id="myDiv">这是一个有 id 的 div</div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const myDiv = document.getElementById('myDiv');
  const anotherDiv = document.querySelector('div');
  console.log(myDiv);
  console.log(anotherDiv);
});
</script>

这种方式简单直接，但要注意在使用 document.querySelector 或 document.getElementById 时，确保 DOM 节点已经存在，否则可能会获取到 null。

以上就是 Vue3 中常见的获取 DOM 节点的方法，开发者可以根据具体的需求和场景选择合适的方式。