Vue 3 的 ref 是获取 DOM 元素或子组件实例的非响应式工具：需模板 ref 属性、脚本 ref(null) 声明、onMounted 后访问；子组件须 defineExpose 暴露接口；v-for 中用函数式 ref 或 Map 避免冲突；TS 中应标注类型并判空。
Vue 3 中的模板引用（ref）不是响应式数据工具，而是专门用于获取真实 DOM 元素或子组件实例的机制。它不参与数据响应逻辑，只负责“连接模板与脚本”，让开发者能在合适时机拿到操作目标。
获取 DOM 元素：三步到位
这是最常见也最基础的用法，适用于 input、div、canvas 等原生标签：
- 在模板中给元素添加 ref="xxx" 属性，比如
<input ref="inputRef"> - 在
<script setup>中声明同名的ref(null)，如const inputRef = ref(null) - 必须等 DOM 渲染完成再访问，通常放在
onMounted钩子内，通过inputRef.value.focus()这类方式操作
获取子组件实例：需要主动暴露
子组件默认是“封闭”的，父组件无法直接访问其内部变量或方法。要支持 ref 调用，子组件必须显式暴露接口：
- 子组件使用
defineExpose({ methodA, dataB })明确列出可被父组件调用的内容 - 父组件模板中写
<ChildComponent ref="childRef" /> - 父组件脚本中声明
const childRef = ref(null)，挂载后即可调用childRef.value.methodA()或读取childRef.value.dataB
动态列表中避免 ref 冲突
v-for 渲染多个同类元素时，不能共用同一个 ref 名称，否则会覆盖或返回数组，导致拿不到预期 DOM：
立即学习“前端免费学习笔记（深入）”；
- 推荐用函数式 ref：
ref="(el) => { if (el && index === activeIndex) inputRefs.value[index] = el }" - 或用
Map结构管理多个引用，键为唯一 ID，值为对应 DOM 元素 - 异步加载、Tab 切换、keep-alive 场景下，ref 可能为 null，操作前务必加
if (xxx.value)判断
类型提示与安全访问
在 TypeScript 项目中，建议为 ref 添加明确类型，提高开发体验和运行时健壮性：
- DOM 引用可写为
const divRef = ref<HTMLDivElement | null>(null) - 子组件引用建议配合 defineComponent 类型推导，或手动标注组件实例类型
- 访问 value 前始终检查是否为 null，尤其在 onBeforeUnmount 或异步回调中
