VueJS 3中点击按钮聚焦输入框功能失效如何解决

这段代码在Vue 3 <script setup> 环境下无法运行，是两个用法不符合<script setup>的语法规则导致的：

• <script setup>是编译时语法糖，脚本作用域内没有绑定组件实例的this，直接访问this会得到undefined，根本读不到$refs属性
• <script setup>中获取模板ref的方式和选项式API不同，必须显式声明和模板ref属性名完全一致的ref变量，不能通过实例的$refs对象访问DOM引用。

<template>
  <button @click="focusInput">Click me to focus on the input</button>
  <input ref="inputField" type="text">
</template>

<script setup>
import { ref } from 'vue'
// 变量名必须和模板上ref="inputField"的属性值完全一致
const inputField = ref(null)

const focusInput = () => {
  // 组件挂载完成后，ref的.value属性指向对应的input DOM元素
  inputField.value.focus()
}
</script>

如果你使用的是Vue 3的选项式API写法（不使用<script setup>，在普通<script>标签内导出组件配置），原本的this.$refs.inputField.focus()写法是可以正常运行的，该写法仅在<script setup>模式下不适用。

内容的提问来源于stack exchange，提问作者Mishen Thakshana