携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第三十天，点击查看活动详情
前言
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute：
<input ref="input">
在我们日常的开发中，可能在某些情况下，我们需要直接访问DOM的底层元素，这个时候我们就可以通过ref属性来完成该操作：
<input ref="input">
通过ref我们可以直接在组件实例挂载之后拿到它的引用，有些情况他可能很有用。
使用模板引用
如何我们是通过组合式API的方式，获取引用的话，需要声明一个同名的ref，通过声明的ref来对他进行使用：
<script setup>
import { ref, onMounted } from 'vue'
const input = ref(null)
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="input" />
</template>
只有在组件挂载之后，才能使用模板引用。还要注意一点的时候，因为该元素还未创建，初次渲染时为null。所以在模板中使用的话要考虑到这种情况。
v-for与模板引用
当我们的v-for与模板引用作用在一个节点时，ref中存放的将会是一个数组
<script setup>
import { ref, onMounted } from 'vue'
const list = ref([
/* ... */
])
const itemRefs = ref([])
onMounted(() => console.log(itemRefs.value))
</script>
<template>
<ul>
<li v-for="item in list" ref="itemRefs">
{{ item }}
</li>
</ul>
</template>
ref中存放的数据顺序不一定会和源数组顺序一致
函数模板引用
除了上面使用字符串作为模板引用名字外，ref还支持动态绑定一个函数。该函数的第一个参数为元素引用。
<input :ref="(el) => { /* 可以将 el 赋值给一个ref 变量 */ }">
当绑定的DOM元素被卸载时，绑定的函数也会被调用一次，不过拿到的参数值会是null
