模版引用（ref获取dome）为null的原因

做项目遇到了需要通过ref获取dome的场景，setup执行的时候组件实例并没有被挂载，所以是拿不到dome的引用的，一般都需要在onMounted中获取。我遇到的问题就是即使在onMounted中获取依然获取不到。在控制台中打印为null，查了一下官方文档发现了原因，下面例子均来自官方文档：

ref允许开发者在一个DOM元素或者子组件实例被挂在后获得它的直接引用，下面是ref在标签上的使用方式：

<input ref="input"></input>

通过上面的声明之后我们可以用组合式API获得上面ipnut标签的引用，我们只需要声明一个同名的ref

<script setup>
import { ref, onMounted } from 'vue'
​
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)
​
onMounted(() => {
  input.value.focus()
})
</script>
​
<template>
  <input ref="input" />
</template>

仔细看上面代码，它使用了<script setup>，如果不使用 <script setup>，需确保从 setup() 返回 ref：

export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}