vue3中如何获取dom示例

Vue3 中可以通过 `ref` 创建一个对 DOM 元素的引用。`ref` 的用法类似于 Vue2 中的 `this.$refs`，但是 Vue3 中的 `ref` 不仅仅可以用于访问 DOM 元素，还可以用于访问组件实例或其他对象。

示例：

<template>
  <div>
    <p ref="myParagraph">Hello, Vue 3!</p>
    <button @click="handleClick">Get DOM instance</button>
  </div>
</template>

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

export default {
  setup() {
    const myParagraph = ref(null);
    
    function handleClick() {
      console.log(myParagraph.value); // 输出 <p>Hello, Vue 3!</p> 的 DOM 实例
    }
    
    return {
      myParagraph,
      handleClick,
    }
  }
}
</script>

在这个示例中，我们通过 `ref` 创建了一个名为 `myParagraph` 的引用，它可以访问到模板中的 `<p>` 元素。当点击按钮时，调用 `handleClick` 函数，可以通过 `myParagraph.value` 获取到 `<p>` 元素的 DOM 实例。