vue3使用组合式api如何获取dom元素

在 Vue 3 中使用组合式 API，可以使用 `ref` 函数来获取 DOM 元素。

具体步骤如下：

1. 在组合式 API 中使用 `ref` 函数创建一个引用，如下所示：

   import { ref } from 'vue';
   
   export default {
     setup() {
       const myButton = ref(null);
   
       return {
         myButton
       };
     }
   }

2. 在模板中使用 `ref` 指令将 DOM 元素绑定到引用上，如下所示：

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

3. 在组件中通过引用访问 DOM 元素，如下所示：

   import { ref } from 'vue';
   
   export default {
     setup() {
       const myButton = ref(null);
   
       const handleClick = () => {
         console.log(myButton.value); // 输出获取到的 DOM 元素
       };
   
       return {
         myButton,
         handleClick
       };
     }
   }

需要注意的是，由于 `ref` 函数返回的是一个响应式对象，因此在访问引用时需要使用 `.value` 属性。