Vue模板引用通过ref属性绑定DOM节点，需同名ref变量+onMounted访问.value；v-for用函数ref收集多节点；Vue 3.5+推荐useTemplateRef，类型更安全。
Vue 模板语法中使用模板引用（Template Ref）获取底层 DOM 节点，核心是通过 ref 属性建立模板元素与响应式变量的绑定关系，并在合适的时机读取其 .value。关键不在于“写多复杂”，而在于命名一致、时机正确、类型安全。
基础写法：同名 ref 变量 + onMounted
这是最常用也最推荐的方式，适用于静态或简单动态节点：
- 模板中给元素添加
ref="xxx"，比如 - 在
<script setup></script>中声明同名的ref(null)，如const inputEl = ref(null) - 必须在
onMounted或之后访问inputEl.value，因为首次渲染前它为null - 示例：让输入框自动获得焦点
onMounted(() => { inputEl.value?.focus() })
v-for 场景：用函数 ref 收集多个节点
当循环渲染多个元素且需分别操作时，不能直接用字符串 ref（会覆盖），改用函数形式：
- 模板中写
:ref="el => listRefs[index] = el"，或更稳妥地用:ref="(el) => el && (listRefs[index] = el)" - 定义一个响应式数组或对象来存节点，如
const listRefs = ref([])或const listRefs = reactive({}) -
onMounted后，listRefs.value就是所有已挂载的 DOM 节点数组
Vue 3.5+ 推荐：useTemplateRef（类型更友好）
如果你使用 Vue ≥3.5，useTemplateRef 是更现代、类型推断更强的选择：
- 导入后直接调用：
const inputEl = useTemplateRef('inputEl') - 参数字符串必须与模板中
ref="inputEl"完全一致 - 它返回的是一个
shallowRef，语义清晰，性能略优 - 支持泛型标注类型，如
useTemplateRef('inputEl')
注意事项和常见陷阱
这些细节容易忽略，但直接影响是否能拿到节点：
-
ref值在组件未挂载或被v-if移除时为null，访问前建议用可选链?.value或判断if (el.value) - 不要在模板表达式里直接用
{{ inputEl.value }}，初次渲染时它是null，会报错 - 避免用原生
document.querySelector替代 ref，它绕过 Vue 生命周期，可能拿不到最新节点或引发竞态 - 如果 ref 绑定的是组件而非原生标签，
.value拿到的是组件实例，不是 DOM 元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
