Vue3使用ref获取dom元素

最近在跟小伙伴一起写项目的过程中，有一个地方需要获取dom元素，引发了我的思考：

Vue2中，可以通过给元素添加ref='xxx'属性，然后在代码中通过this.$refs.xxx获取到对应的元素，但是在Vue3中，既没有this，也没有$refs，那么现在想获取dom元素，要怎么办呢？

Vue3要获取dom还是要借助ref，同时还要借助生命周期

原理如下：在Vue3中，setup代表的是beforeCreate/created生命周期钩子，在setup执行时，template中的元素还没挂载到页面上，所以必须在onMounted之后才能获取到元素

代码展示：

<template>
    <div>
          <video ref="videoPlayer" class="video-js"></video>
    </div>  
</template>
<script setup>
     //注意是要videoPlayer.value，才可以拿到dom元素
     //而且上面ref声明的名字要与下面的保持一致
     import { ref, reactive } from "vue";
     const videoPlayer = ref(null);
     onMounted(() => {
     console.log(videoPlayer.value) 
     });
</script>