vue3 使用ref获取Dom元素

vue3 中文文档 

记录一下自己获取dom的一些用法

一 .  vue2.x 获取dom

<div ref="dom"></div>
2 this.$refs.dom

二. vue3.x 获取dom

(1) 使用 setRef

如果是循环的多个dom 可以定义为数组 push添加

<template>
  <div :ref="dom">DOM元素</div>
</template>

<script lang="ts" >
import { nextTick } from 'vue';
export default {
  setup() {
    const refs: HTMLElement = '';
　　
    const dom = (el:HTMLElement) => {
      refs= el;
    }

    nextTick(() => {
      console.log(refs);
    })
    return {
      dom
    };
  }
};
</script>

(2) 通过ref 获取dom

 <template>
   <div :ref="refs">DOM元素</div>
 </template>
 
 <script>
 import { nextTick ，ref} from 'vue';
 export default {
   setup() {
     let refs = ref(null);
 
     nextTick(() => {
       console.log(refs);
     })

     return {
       refs
     };
   }
 };
 </script>

　　

这样就可以进行dom操作了，有不对的地方欢迎大家指正吖