Vue3的setup()函数中，组件如何获取元素？

Vue3的setup()函数，因为无法像在Vue2中调用this变量，Vue3的setup()函数中并不存在内置变量this，因此也无法像在Vue2中简简单单地通过this的$refs属性获取组件中通过ref属性标记的元素。

对于这一状况，Vue.js官方给出了新的解决方案，那就是通过ref函数获取组件中的标签元素，具体步骤如下：

1. 引入ref函数

import { onMounted, ref } from 'vue'

2. 用ref函数先定义一个标签常量[inputRef]

const inputRef = ref<HTMLElement|null>(null)

3. 将标签常量[inputRef]返回

export default {
  setup() {
    const inputRef = ref<HTMLElement|null>(null)
    
    return {
      inputRef
    }
  },
}

4. 将返回的[inputRef]标记到组件模板中

<input type="text" ref="inputRef">

5. 通过常量[inputRef]操作元素，如自动获得焦点

onMounted(() => {
	inputRef.value && inputRef.value.focus()
})

【官方完整代码】

<template>
  <h2>App</h2>
  <input type="text">---
  <input type="text" ref="inputRef">
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
/* 
ref获取元素: 利用ref函数获取组件中的标签元素
功能需求: 让输入框自动获取焦点
*/
export default {
  setup() {
    const inputRef = ref<HTMLElement|null>(null)

    onMounted(() => {
      inputRef.value && inputRef.value.focus()
    })

    return {
      inputRef
    }
  },
}
</script>

不过，如果习惯了Vue2通过$refs属性操作元素的同学也不是没有办法，通过Vue官方在Vue3中提供的内置方法getCurrentInstance，我们还是可以获得组件的$refs属性的，具体步骤如下：

1. 将标签元素[inputRef]绑定到组件中

<input type="text" ref="inputRef">

2. 引入[ getCurrentInstance ] 方法

import { getCurrentInstance } from "vue"

2. 通过[ getCurrentInstance ] 方法，获得[proxy]解构变量

const { proxy } = getCurrentInstance()

4. 通过解构变量[proxy]操作元素，如自动获得焦点

onMounted(() => {
	proxy.$refs["inputRef"].focus()
})

【完整代码如下】

<template>
  <h2>App</h2>
  <input type="text">---
  <input type="text" ref="inputRef">
</template>

<script lang="ts">
import { onMounted, getCurrentInstance } from 'vue'
export default {
  setup() {
    const { proxy } = getCurrentInstance()

    onMounted(() => {
		proxy.$refs["inputRef"].focus()
    })
  },
}
</script>