Vue3中使用ref获取dom元素的方式方法，Chatgpt的回答

​​​​​​
在Vue3中，使用ref获取DOM元素（比如组件中的某个元素）的方法与Vue2有所不同。在Vue2中，我们可以给这个元素添加一个ref属性，并在组件中使用this.$refs来访问这个属性。而在Vue3中，我们需要使用Vue3提供的ref函数来创建一个响应式引用，然后将其作为元素的属性值传递。这样，我们才能在组件中使用ref函数获取到这个元素的引用。

下面是一个示例代码：

<template>
  <div ref="myDiv">Hello Vue</div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const myDiv = ref(null)
    
    onMounted(() => {
      console.log(myDiv.value) // <div>Hello Vue</div>
    })

    return {
      myDiv
    }
  }
}
</script>

在上面的代码中，我们首先在模板中使用了ref，并将其设置为myDiv，这样这个div的引用就被赋值给了myDiv这个响应式引用。

接下来，在setup()函数中，我们使用ref函数创建一个名为myDiv的响应式引用，并将其初始化为null。然后，在onMounted中，我们通过myDiv.value的方式访问到了这个引用，从而获取到了这个div元素。

需要注意的是，由于Vue3中的组件模型已经改变，我们无法在template中直接访问到this.$refs，而是需要在setup()函数中使用ref来创建响应式引用。同时，当我们使用ref创建DOM元素的引用时，我们需要在模板中使用ref将引用绑定到元素上。

使用Setup语法糖的形式获取Dom元素：

// 使用ref获取dom元素
const show = ref<null | HTMLElement>(null)
onMounted(() => {
    
    
  console.log("show---", show.value);
})