vue3 setup $refs的用法

在Vue 3中，使用`setup()`函数来编写组件逻辑，`$refs`的用法略有不同。在`setup()`函数中，你可以通过`ref`函数来创建一个响应式的引用，并使用该引用来获取组件或DOM元素的引用。

以下是在Vue 3中使用`$refs`的用法示例：

<template>
  <div ref="myDiv">Hello, world!</div>
</template>

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

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

    onMounted(() => {
      // 在组件挂载完成后，可以通过myDiv.value来访问DOM元素
      console.log(myDiv.value.textContent)
    })

    return {
      myDiv
    }
  }
}
</script>

在上面的示例中，我们使用`ref`函数创建了一个名为`myDiv`的引用，并将其绑定到模板中的`div`元素上（使用了`ref="myDiv"`）。在`setup()`函数内部，我们可以通过`myDiv.value`来访问该引用。

在`onMounted()`钩子函数中，我们可以确保组件已经挂载完成。此时，我们可以访问`myDiv.value`并获取DOM元素的引用。在此示例中，我们通过`textContent`属性获取了DOM元素的文本内容，并打印出来。

需要注意的是，在Vue 3中，引用是只读的，因此不能修改引用的值。如果需要修改引用的值，可以使用`ref`函数返回的对象的`value`属性进行操作。

总之，在Vue 3的`setup()`函数中，你可以使用`ref`函数来创建响应式的引用，并通过引用的`value`属性来访问组件或DOM元素的引用。