虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的ref。
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)
// 如果作用在组件上，那么ref获取的就是这个组件实例
const child= ref(null)
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="input" />
<Child ref="child" />
</template>
