Vue 中 ref 绑定 DOM 需遵循「声明→绑定→访问」三步闭环，必须在 onMounted 中操作；ref 初始化为 null，模板中用同名变量绑定；TypeScript 项目需标注具体 DOM 类型以保障类型安全。
Vue 中的 ref 变量结合 DOM 元素引用，核心在于「声明 → 绑定 → 访问」三步闭环，且必须等组件真实挂载后才能安全操作节点。关键不是“能不能”，而是“什么时候、怎么用才不出错”。
ref 绑定 DOM 的标准写法
在 `<script setup>` 中用 <strong>ref(null) 初始化，模板中用同名变量绑定到目标元素：</script>
- 创建 ref：const inputRef = ref(null) —— 初始值必须为 null（否则类型或逻辑易出错）
- 模板绑定：
<input ref="inputRef">—— 不加冒号，直接传变量名（字符串 ref 已不推荐） - 注意：ref 名必须与脚本中定义的变量名完全一致，大小写敏感
必须在 onMounted 中访问 DOM
因为 DOM 节点在组件渲染完成前不存在，ref.value 在 setup 同步执行时仍为 null。只有在生命周期钩子中才能确保节点就位：
- 使用
onMounted(() => { ... })是最稳妥的选择 - 不要在 setup 顶层直接读取 inputRef.value，会得到 null
- 若需后续响应式触发操作（如点击后聚焦），可随时通过 inputRef.value 调用原生方法，例如
inputRef.value.focus()
类型安全建议（尤其 TypeScript 项目）
避免运行时报错，明确指定 DOM 类型能提前拦截错误：
立即学习“前端免费学习笔记（深入）”；
- 输入框：
const inputRef = ref<HTMLInputElement | null>(null) - 按钮：
const btnRef = ref<HTMLButtonElement | null>(null) - 通用容器：
const divRef = ref<HTMLDivElement | null>(null) - 类型标注后，.value 的属性和方法会有完整提示，比如
inputRef.value?.select()不会报错
v-for 多个元素的 ref 处理
当需要批量操作列表项时，ref 会自动收集为数组，但需主动初始化为数组类型：
- 声明：
const itemRefs = ref<HTMLDivElement[]>([]) - 模板：
<div v-for="item in list" :key="item.id" ref="itemRefs">{{ item.name }}</div> - 挂载后：
itemRefs.value[0]?.scrollIntoView()或遍历操作 - 注意：不能用字符串 ref（如 ref="item"），否则只会覆盖，得不到数组
