Vue3中如何使用ref获取元素节点

在 Vue 中我们很少直接操作 DOM，毕竟 Vue 的理念是以数据驱动视图。但是在实际情况中，我们也会遇到就是需要直接操作 DOM 节点的需求，这个时候 Vue 提供了一种方式让我们可以获取 DOM 节点：ref 属性。ref 属性是 Vue2 和 Vue3 中都有的，但是使用方式却不大一样。

1.回顾一下在vue2中我们是如何使用它的

获取节点：这是 ref 的基本功能之一，目的就是获取元素节点，在 Vue 中使用方式也很简单，

代码如下：

<template>
  <div id="app">
    <div ref="formRef">这是一个div</div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.formRef); // <div>这是一个div</div>
  },
};
</script>

代码中可以看到我们在 div 元素上绑定了 ref 属性，并命名为formRef，接下来我们直接使用 this.$refs.formRef 的方式就可以获取到该 DOM 元素了。

2.vue3中我们是如何使用它的

Vue3 中通过 ref 访问元素节点与 Vue2 不太一样，在 Vue3 中我们是没有 this 的，所以当然也没有 this.$refs。想要获取 ref，我们只能通过声明变量的方式。

代码如下：

<template>
  <div ref="formRef">这是一个div</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const formRef = ref<any>(null);
onMounted(() => {
  console.log(formRef.value); // <div>这是一个div</div>
});
</script>

代码中我们给 div 元素添加了 ref 属性，为了获取到这个元素，我们声明了一个与 ref 属性名称相同的变量formRef，然后我们通过 formRef.value 的形式便获取到了该 div 元素。

注意点：

• 变量名称必须要与 ref 命名的属性名称一致。
• 通过 formRef.value的形式获取 DOM 元素。
• 必须要在 DOM 渲染完成后才可以获取 formRef.value，否则就是null。