$refs用于直接访问DOM元素或子组件实例，需在mounted中使用并判空；原生标签ref指向DOM节点，自定义组件ref指向组件实例；非响应式，不可在模板中读取或用于v-if。
在 Vue Options API 中，$refs 是访问子组件实例或原生 DOM 元素最直接的方式。它不依赖响应式系统，也不走 props/event 通信流程，适合聚焦、滚动、第三方库集成等需要“穿透式”操作的场景。
给元素或组件加 ref 属性
在模板中，为目标 DOM 元素或子组件添加 ref 属性，值为字符串标识符：
- 对原生标签（如
<input>、<div>）加ref="xxx"，this.$refs.xxx指向对应 DOM 节点 - 对自定义组件（如
<MyModal></MyModal>）加ref="modal"，this.$refs.modal指向该组件实例（含其 data、methods、$emit 等）
在 mounted 钩子中安全使用
$refs 只在组件完成首次渲染后才可用，不能在 created 或 beforeMount 中访问。必须等到 DOM 就绪：
- 把操作逻辑放在
mounted()钩子内，例如自动聚焦输入框：this.$refs.input.focus() - 若涉及异步更新（如 v-if 切换后需访问），可配合
this.$nextTick()确保 DOM 已更新
区分 DOM 元素和组件实例
同一个 $refs 对象里混存两类引用，使用前注意类型判断：
立即学习“前端免费学习笔记（深入）”；
- DOM 元素可直接调用原生方法：获取值用
this.$refs.input.value，设置样式用this.$refs.box.style.color = 'red' - 子组件实例才能调用其定义的方法：如
this.$refs.childComponent.resetForm()，前提是子组件暴露了该方法 - 可通过
instanceof HTMLElement或检查是否存在$options属性粗略判断类型
避免常见误用
这些写法会导致错误或不可预期行为：
- 不在模板中用
{{ $refs.xxx }}或v-if="$refs.xxx"——$refs非响应式，模板里读取无效且会报错 - 不给动态生成的元素（如
v-for循环项）设相同 ref 名 —— Vue 会覆盖，只保留最后一个；需改用数组 ref 或 key 区分 - 不假设
$refs.xxx总存在 —— 若元素被v-if移除，对应 ref 值为undefined，使用前应判空
