如何在 Vue3 的 setup 中使用 $refs

方法一：借助 ref() 函数

通过 ref 函数，依然可以实现类似 this.$refs 的功能。

首先在 setup 中定义一个 Ref 变量

import { defineComponent, ref, onMount } from 'vue'

defineComponent({
  setup() {
    const divRef = ref(null)

    onMount(() => {
      console.log(divRef.value)
    })
    
    return {
      divRef
    }
  }
})

然后将这个 divRef 变量挂载到 DOM 上

<template>
  <div ref="divRef" />
</template>

这样当 onMount 钩子被触发的时候，div 的 DOM 会在控制台打印出来。

另外 ref 也能实现动态关联，具体实现可以参考文章 《$refs and the Vue 3 Composition API》

方法二：找到 this

通过 getCurrentInstance() 可以获得 vue 实例对象。

我们稍微改造下上文的代码

import { defineComponent, getCurrentInstance, onMount } from 'vue'

defineComponent({
  setup() {
    onMount(() => {
      console.log(getCurrentInstance().ctx.$refs.divRef)
    })
  }
})

<template>
  <div ref="divRef" />
</template>

注意，使用 getCurrentInstance 是有一些限制的，可以参考官方说明