Vue3 Ref 对象转为 HTMLElement 对象

通过 Vue3 的 Ref 对象获取到的 HTMLElement 对象，可以直接使用.value属性来访问。例如：

<template>
  <div ref="myDiv">Hello Vue3!</div>
</template>

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

export default {
  setup () {
    const myDiv = ref(null)

    onMounted(() => {
      console.log(myDiv.value) // 获取到真实的 DOM 元素
    })

    return {
      myDiv
    }
  }
}
</script>

在上面的代码中，我们在 <div> 元素上使用了 ref="myDiv" 属性来获取一个 Vue3 的 Ref 对象，然后通过 myDiv.value 来访问这个元素的真实 DOM 对象，即获取到了一个 HTMLElement 对象。

需要注意的是，在使用 ref 获取到一个元素后，如果需要在其上添加事件监听器等操作，必须要等到组件挂载完成后再进行，因为在组件挂载之前，这个元素还没有被渲染出来。这就需要使用 Vue3 的生命周期钩子函数 onMounted 来获取一个元素的真实 DOM 对象。