深入探索 Vue 3 中获取 DOM 节点的多种方法

---

前言

在现代前端开发中，Vue.js 以其简洁、高效的特点受到了广泛欢迎。作为一个用于构建用户界面的渐进式框架，Vue 提供了强大的工具来操控 DOM。然而，尽管 Vue 强调数据驱动的方式，有时我们仍然需要直接操作 DOM 节点来实现某些功能。在 Vue 3 中，获取 DOM 节点的方法变得更加多样化且灵活。本文将详细介绍这些方法，并探讨它们在实际开发中的应用。

---

正文

1.使用 ref 属性

在 Vue 3 中，使用 ref 属性是最常见且推荐的方法。它简洁、直观，并且与 Vue 的响应式系统完美结合。代码如下：

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
</template>

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

const myDiv = ref(null);

onMounted(() => {
  console.log(myDiv.value); // 这里的 myDiv.value 就是 DOM 节点
});
</script>

在这个示例中，我们首先在模板中为 div 标签添加了 ref 属性，然后在组合式 API 中使用 ref 创建一个引用，并在 onMounted 生命周期钩子中访问该节点。myDiv.value 即为所需的 DOM 节点。

2.使用 getCurrentInstance

getCurrentInstance 方法提供了一种访问当前组件实例的方式，从而可以获取更多组件属性和方法。这在需要深入操作组件时非常有用。代码如下：

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
</template>

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

onMounted(() => {
  const instance = getCurrentInstance();
  const myDiv = instance.refs.myDiv;
  console.log(myDiv); // 这里的 myDiv 就是 DOM 节点
});
</script>

通过 getCurrentInstance 方法，我们可以获取当前组件实例，并从中访问 refs 属性，从而获取到 DOM 节点。这种方法特别适合需要访问组件内多个引用时使用。

---

3.直接操作模板生成的元素

在某些情况下，我们可能更习惯于使用传统的 DOM 查询方法，如 document.querySelector 或 document.getElementById。代码如下：

<template>
  <div id="myDiv">Hello, Vue 3!</div>
</template>

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

onMounted(() => {
  const myDiv = document.getElementById('myDiv');
  console.log(myDiv); // 这里的 myDiv 就是 DOM 节点
});
</script>

这种方法直接操作 DOM，对于简单的需求可能更为直接和快速。然而，需要注意的是，这种方法较难与 Vue 的响应式系统集成，应该谨慎使用。

4.使用自定义指令

自定义指令提供了强大的工具来对 DOM 节点进行复杂操作。在需要对节点进行多种操作时，自定义指令非常有用。代码如下：

<template>
  <div v-my-directive>Hello, Vue 3!</div>
</template>

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

const myDirective = {
  mounted(el) {
    console.log(el); // 这里的 el 就是 DOM 节点
  }
};

export default {
  directives: {
    myDirective
  }
};
</script>

在这个示例中，我们定义了一个自定义指令 myDirective，并在元素挂载时获取该元素的引用。这种方法特别适合需要在节点生命周期内进行复杂操作的场景。

总结

Vue 3 提供了多种获取和操作 DOM 节点的方法，每种方法都有其独特的应用场景。推荐使用 ref 属性和组合式 API，因为它们简洁且易于维护。在需要深入访问组件实例或进行复杂操作时，getCurrentInstance 和自定义指令也是很好的选择。通过灵活应用这些方法，我们可以更高效地开发出功能丰富、响应迅速的 Vue 应用。

欢迎扫描下方二维码关注WX公众号