Vue模板引用（Template Refs）全解析1

在 Vue 的声明式渲染模型中，我们通常无需直接操作 DOM——Vue 会自动处理 DOM 的更新与维护。但在某些场景下（如设置输入框焦点、初始化第三方 DOM 库、获取元素尺寸等），我们需要直接访问底层 DOM 元素或子组件实例。此时，模板引用（Template Refs） 就是实现这一需求的核心工具。

一、基础用法：访问 DOM 元素

模板引用通过特殊的 ref 属性实现：在模板中为元素添加 ref 属性并指定标识，再在逻辑中通过 Vue 提供的 API 获取该元素的直接引用。

1. 基本语法（Vue 3.5+：useTemplateRef）

Vue 3.5 及以上版本推荐使用 useTemplateRef 辅助函数获取模板引用，用法简洁且类型推断更友好：

<script setup>
import { useTemplateRef, onMounted } from 'vue'// 1. 用 useTemplateRef 声明引用：第一个参数必须与模板中 ref 的值一致
// input 是一个 ref 对象，其 .value 会指向模板中对应的 DOM 元素
const input = useTemplateRef('my-input')// 2. 在组件挂载后访问引用（此时 DOM 已存在）
onMounted(() => {