vue3获取dom元素

在vue2中，可以通过 this.$refs.xxxx 来获取dom元素，但是在 vue3 中使用组合式API时，是没有 this 的，下面是 vue3 中获取 dom 元素的方法：

1.通过 js 获取 DOM 元素
vue 只是 javascript 的一个框架，自然也可以使用原生 js 的方法

document.querySelector(选择器)
document.getElementById(id)
document.getElementsByClassName(class)

缺陷： 在 vue 的项目中，通常是组件化开发，每个组件都是相对独立的，但是通过 js 获取 dom 元素时，是获取到整个页面的 dom 元素，所以有可能会拿到意料之外的元素。

2.通过 ref 获取

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

const test = ref();   // 通过ref获取dom元素，变量名必须要和dom元素上面的名字一样
console.log(test);
</script>

<template>
	<div ref="test">测试获取dom</div>
</template>

注意：使用 ref 时，变量名必须要和 dom 元素上面的名字一样。 即你在 dom 元素上写的 ref=“xxx” ，你在定义变量时，也要使用 const xxx = ref() 。

缺陷： 感觉这样获取 dom 元素不是很友好，因为 ref 也可以用来创建响应式对象，不太直观（一眼看过去，不能确定它就是一个 dom 元素）, 同时还会限制你取变量的名字。