ref 可获取 DOM 元素或组件实例，需在 onMounted 后访问；一个 ref 仅绑定一个元素，操作原生 DOM 不触发响应式更新。
在 Vue3 中，ref 不仅能定义响应式数据，还能用来获取对真实 DOM 元素或组件实例的引用——这是操作原生节点最直接、最推荐的方式。
一、用 ref 绑定普通 DOM 元素
在模板中给元素添加 ref 属性（值为字符串或响应式引用），Vue 会在挂载后自动把对应 DOM 节点赋值给该 ref。
推荐使用 ref 响应式引用（而非字符串 ref），更符合 Composition API 风格，也便于类型推导：
import { ref, onMounted } from 'vue'
export default {
setup() {
const inputRef = ref(null)
onMounted(() => {
// 此时 inputRef.value 已指向真实的 <input> 元素
inputRef.value.focus()
console.log(inputRef.value.tagName) // 'INPUT'
})
return { inputRef }
}
}
对应模板写法：
立即学习“前端免费学习笔记（深入）”；
<input ref="inputRef" type="text" />
二、ref 必须在 onMounted 后才可用
DOM 元素在组件挂载前尚未生成，所以不能在 setup 顶层同步访问 ref.value —— 它此时是 null。
正确时机包括：
- onMounted：最常用，确保 DOM 已渲染完成
- watchEffect（监听 ref 变化）：当 ref.value 从 null 变为真实节点时触发
- 事件回调中（如 click）：只要元素已存在，即可安全访问
三、绑定多个相同 ref 的元素？不行，但有替代方案
一个 ref 只能绑定一个元素。若需批量操作（比如一组按钮），不要写多个 ref="btnRef" —— 这会导致只有最后一个生效。
可行做法：
- 用 querySelectorAll 手动查找：
document.querySelectorAll('.my-btn') - 为每个元素分配唯一 ref：
ref="btnRefs[i]"，配合数组管理 - 用 template ref + v-for（Vue3.3+ 支持）：结合
ref函数动态收集
四、操作 DOM 时注意响应式边界
通过 ref 拿到的是原生 DOM 节点，对其修改（如 el.style.color = 'red'、el.innerHTML = 'xxx'）不会触发 Vue 更新，也不会被响应式系统追踪。
这类操作适合：
- 聚焦、滚动、动画控制等纯 DOM 行为
- 第三方库集成（如 Chart.js、MapLibre）
- 需要绕过虚拟 DOM 的精细控制场景
但避免用它替代响应式数据更新视图（比如改 innerHTML 替代 v-model），否则容易导致状态不一致。
