ref 是 Vue 中操作 DOM 和调用子组件的核心定位器，需配合 onMounted 使用、显式暴露子组件能力、慎用于 v-for/v-if，并替代 $refs 实现自动绑定。
Vue 中的 ref 是操作真实 DOM 和调用子组件能力的关键入口。它不是响应式数据工具，而是“定位器”——在模板中标记目标，在脚本中精准取用。用对时机、写对结构、避开常见坑，才能真正发挥它的作用。
获取 DOM 元素：三步到位
给元素加 ref 属性、在 script setup 中声明同名 ref 变量、等挂载完成再访问 .value：
- 必须配合 onMounted 使用 —— 渲染前 ref.value 是 null，直接读取会报错
- ref 变量建议初始化为
null，类型可标注为HTMLElement | null（TS 更安全） - 常见用途：聚焦 input、滚动到某区域、读取 canvas 上下文、设置样式或 class
调用子组件方法与数据
子组件需主动暴露能力，父组件才能通过 ref 调用：
- 子组件用
defineExpose({ methodA, dataB })显式导出，未暴露的内部变量和方法不可见 - 父组件 ref 变量类型建议用
InstanceType<typeof ChildComponent> | null，获得完整类型提示 - 调用时注意判空：
childRef.value?.methodA()，避免组件未挂载或已被卸载时报错
ref 在 v-for 和 v-if 中的注意事项
动态列表和条件渲染会影响 ref 的行为，不能当成普通数组或对象直接使用：
立即学习“前端免费学习笔记（深入）”；
-
v-for 中不要用字符串 ref（如
ref="item"），Vue 会覆盖前一个，最终只保留最后一个 - 改用函数式 ref：
:ref="(el) => { if (el) itemRefs.push(el) }"，手动收集多个 DOM 引用 - v-if 为 false 时，对应 ref.value 会变为 null；切换后需重新检查值是否存在，不可缓存旧引用
ref vs $refs：组合式 API 下的简化逻辑
Vue 3 组合式 API 中，不再需要 this.$refs：
- ref 属性名和 script 中的 ref 变量名保持一致，即可自动绑定
- $refs 是选项式 API 的遗留概念，组合式 API 中 ref 变量本身已承载全部功能
- 避免混用：不要在 setup 里写
this.$refs.xxx，也不要在模板中给 ref 赋值表达式（如ref="item + index"）
