Vue3 + Ts 获取dom

在vue2中我们通常 this.$refs 来获取DOM元素，但是在vue3中，setup并没有通过各种方式去绑定this，所以我们需要通过别的方法来进行获取。

1.在DOM中，ref的使用方法和vue2相同。

<div class="score-panel">
       <div>SCORE:<span class="score" ref="scoreSpan">0</span></div>
       <div>LEVEL:<span class="score" ref="levelSpan">1</span></div>
     </div>

2.在script中，可以使用getCurrentInstance配合来获取DOM（注意：不能在onMounted()之外直接使用）

<script lang="ts" setup>
import {
    
     ref, onMounted, getCurrentInstance } from "vue";
import {
    
     ScorePanel } from "@/type/sneak";
let refs = null;
onMounted(() => {
    
    
  let {
    
     $refs } = (getCurrentInstance() as any).proxy; 
  // 你可以打印一下(getCurrentInstance() as any)会在 proxy 中发现 $refs
  refs = $refs;
  const scoreSpan = refs.scoreSpan; // 使用refs获取dom
  const levelSpan = refs.levelSpan;
  //下面这是我实例化了一个ScorePanel类，并将获取的DOM传了过去
  const scorePanel = new ScorePanel(scoreSpan, levelSpan) 
  console.log(scorePanel);
});

</script>

这样，我们就能用refs来获取dom了

3.或者你也可以在onMounted中直接使用 **document.getElementById(“元素id”)**也能拿到对应的dom。