Vue3 如何获取 DOM

在Vue3的开发中，有时我们需要直接操作DOM元素来实现一些特定的功能，比如获取元素的尺寸、位置或者对元素进行动画操作等。下面将介绍几种在Vue3中获取DOM的常见方法。

一、ref引用

ref 是Vue3中获取DOM元素最常用的方式之一。我们可以在模板中给需要获取的DOM元素添加 ref 属性，然后在组件实例中通过 this.$refs 来访问对应的DOM元素。示例代码如下：

<template>
  <div ref="myDiv">这是一个div元素</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const myDiv = ref(null);
    onMounted(() => {
      console.log(myDiv.value);
    });
    return { myDiv };
  }
};
</script>

在上述代码中，我们通过 ref 函数创建了一个响应式引用 myDiv，并在 onMounted 生命周期钩子函数中访问了对应的DOM元素。

二、使用$el属性

在Vue3中，组件实例有一个 $el 属性，它指向组件的根DOM元素。如果我们需要获取组件的根DOM元素，可以直接通过 this.$el 来访问。示例代码如下：

<template>
  <div>这是组件的根元素</div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$el);
  }
};
</script>

三、通过自定义指令获取DOM

除了上述两种方法，我们还可以通过自定义指令来获取DOM元素。自定义指令允许我们在DOM元素渲染时执行一些自定义的逻辑，从而实现获取DOM元素的目的。示例代码如下：

<template>
  <div v-my-directive>这是一个div元素</div>
</template>
<script>
const myDirective = {
  mounted(el) {
    console.log(el);
  }
};
export default {
  directives: {
    myDirective
  }
};
</script>

通过以上几种方法，我们可以在Vue3中方便地获取DOM元素，从而实现各种复杂的交互效果和功能。