vue3通过ref获取dom

在Vue 3中，可以使用`ref`函数来获取DOM元素。`ref`函数接收一个初始值作为参数，并返回一个响应式的引用对象。你可以将这个引用对象绑定到DOM元素上，然后通过`.value`来访问DOM元素。

下面是一个示例代码：

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

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

export default {
  setup() {
    const myButton = ref(null);

    const handleClick = () => {
      console.log(myButton.value); // 访问DOM元素
    };

    return {
      myButton,
      handleClick
    };
  }
};
</script>

在上面的例子中，我们使用了`ref`函数来创建了一个名为`myButton`的引用对象，并将其绑定到了按钮元素上。在`handleClick`方法中，我们通过访问`myButton.value`来获取按钮的DOM元素。

需要注意的是，在Vue 3中，通过`ref`获取的DOM元素是一个普通的DOM对象，而不是Vue组件实例。如果你想要使用组件实例的方法或属性，可以考虑使用`ref`与`toRefs`结合来实现。