vue2中，ref使用：

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

复制代码
<template>
  <div id="app">
    <div ref="hello">Vue2，ref获取dom元素</div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.hello); // <div ref="hello">Vue2，ref获取dom元素</div>
  },
};
</script>
复制代码

vue3中，ref使用：

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

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

?
1
2
3
4
5
6
7
8
9
10
<template>
  <div ref="hello">Vue3， ref获取dom元素</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const hello = ref(null);
onMounted(() => {
  console.log(hello.value); //  <div ref="hello">Vue3， ref获取dom元素</div>
});
</script>

注意点：

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