前言
虽然 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
