vueuse的unrefElement用法

在学习vueuse模块的unrefElement用法前，先来复习下ref属性在普通html标签和自定义组件标签上的用法。

看下面的例子：

<script setup>
import JuanButton from '@/components/button'
import { onMounted, ref } from 'vue'
const btn = ref()
const span = ref()
onMounted(() => {
  console.log(btn.value)

  console.log(span.value)
})
</script>
<template>
  <div class="m-8">
    <div>
      <span ref="span" class="mr-2 inline-block border border-amber-500">我是一个span</span>
      <JuanButton ref="btn" type="primary">Hello</JuanButton>
    </div>
  </div>
</template>

实验发现，ref作用在普通html元素上可以通过.value访问到dom元素；而对于自定义组件，则是获取组件对象：

要访问组件内部的dom元素，可以访问btn.value.$el

总结下来要通过ref来访问html标签对应的元素，有两种方式：

1. html原生dom元素

   const span = ref()
   onMounted(() => {
     console.log(span.value)
   })
   

2. 自定义组件对应的dom

   const btn = ref()
   onMounted(() => {
     console.log(btn.value.$el)
   })
   

而vueuse模块的unrefElement方法提供了统一的操作方式：

<script setup>
...
import { unrefElement } from '@vueuse/core'
const btn = ref()
const span = ref()
onMounted(() => {
  console.log(unrefElement(btn))

  console.log(unrefElement(span))
})
</script>