Vuw2和Vue3如何使用ref获取元素节点？

Vue2中

<template>
  <div id="app">
    <div ref="echohye">新年快乐</div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.echohye); // <div>新年快乐</div>
  },
};
</script>

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

Vue3中

<template>
  <div ref="echohye">新年快乐</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
const echohye = ref(null);
onMounted(() => {
  console.log(echohye.value); // <div>新年快乐</div>
});
</script>

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

注意：变量名称必须要与 ref 命名的属性名称一致。