vue3 ref获取dom

Vue3中通过ref获取DOM的方式发生了变化。在Vue2中，我们可以使用$this.$refs来获取组件中的DOM元素，但是在Vue3中，这种方式已经被废弃了。Vue3中，我们应该使用`ref`函数来获取DOM。

`ref`函数能够在模板中声明一个DOM元素的引用，同时也能够在JS代码中使用`ref`函数来获取刚刚声明的这个DOM元素的引用。

下面是一个例子：

模板中的使用：

<template>
  <div>
    <button ref="myBtn" @click="handleClick">Click me</button>
  </div>
</template>

在JS中的使用：

<script>
  import { ref } from 'vue';
  export default {
    setup() {
      const myBtn = ref(null);
      function handleClick() {
        if (myBtn.value) {
          myBtn.value.disabled = true;
        }
      }
      return {
        myBtn,
        handleClick
      };
    }
  };
</script>

在这个例子中，我们使用了Vue3的`ref`函数在模板中声明了一个`button`元素的引用，并且在JS代码中通过`ref`函数获取了这个引用。在`handleClick`函数中，我们通过`myBtn.value`来访问这个引用，以此来改变Button的disabled属性。

综上所述，Vue3中通过`ref`函数来获取DOM的方式更加直观和方便。它能够大大提高Vue3应用的开发效率和开发体验，非常值得我们使用。