ref 可精准获取 DOM 元素或子组件实例：模板中 ref="xxx"，setup 中 const xxx = ref(null)，挂载后通过 xxx.value 访问；子组件需 defineExpose 显式暴露；v-for 中须用函数式 ref 避免复用。
在 Vue 3 中，ref 不仅用于响应式数据，还能配合模板中的 ref 特性，精准获取 DOM 元素或子组件实例。关键在于：模板中写 ref="xxx"，组合式 API 中用 const xxx = ref(null) 声明并绑定，Vue 会在挂载后自动赋值。
获取原生 DOM 元素
适用于聚焦输入框、操作 Canvas、滚动定位等场景。需确保在组件挂载后（onMounted）访问，否则值为 null。
- 在模板中给元素添加
ref="inputRef" - 在
setup中声明同名响应式引用：const inputRef = ref(null) - 在
onMounted或事件回调中使用：inputRef.value?.focus()
获取子组件实例
用于调用子组件暴露的方法（通过 defineExpose），或读取其内部状态。注意：默认情况下子组件实例不对外暴露任何属性，必须显式声明。
- 子组件中用
defineExpose({ methodA, dataB })暴露需要的属性或方法 - 父组件模板中写
<ChildComponent ref="childRef" /> - 父组件中声明
const childRef = ref(null)，挂载后即可调用childRef.value.methodA()
动态 ref 与 v-for 中的注意事项
在列表渲染中避免用字符串 ref（如 ref="itemRef"），会导致所有项共用一个 ref。应改用函数式 ref，实现每个元素独立绑定。
- 模板中写：
<div v-for="(item, i) in list" :ref="el => { if (el) divRefs.value[i] = el }"> - JS 中声明：
const divRefs = ref([])，后续可通过divRefs.value[0]访问首个元素 - 函数式 ref 在元素卸载时会收到
null，适合清理逻辑
常见问题与避坑提示
ref 的值始终是响应式的，但 DOM 元素本身不是响应式对象 —— 修改 ref.value 不会触发视图更新，它只是个“容器”。
- 不要在
setup顶层直接访问xxxRef.value，此时尚未挂载，值为null - 组件内使用
ref获取自身根元素，可在onMounted后读取$refs（选项式）或绑定到根标签（组合式） - TS 用户需明确类型，如
const inputRef = ref<htmlinputelement null>(null)</htmlinputelement>，避免类型错误
