vue 3 中应使用 ref 数组或 reactive 对象管理 v-for 动态 dom 引用，避免共用同一 ref；ref 数组需预分配并按索引绑定，reactive 对象则以 item.id 为 key 映射更安全灵活，且需在 onmounted/onupdated 中操作确保 dom 就绪。
在 Vue 3 的 setup 中，用 ref 绑定动态生成的 DOM 列表（比如 v-for 渲染的多个元素），不能直接给整个列表赋一个 ref，因为 ref 只能持有一个值。正确做法是为每个 DOM 元素单独创建 ref，并用数组或对象来管理——但要注意：不能在循环中直接调用 ref()（会破坏响应式依赖收集），而应提前初始化好 ref 容器。
用 ref 数组预分配，配合 v-for 索引绑定
适用于已知列表长度、或可预估最大数量的场景（如分页列表、固定项数的轮播）。先声明一个空数组 ref，再在 v-for 中通过索引赋值：
const itemRefs = ref([])
// 模板中
// <div v-for="(item, i) in list" :key="item.id" ref="el => { if (el) itemRefs.value[i] = el }">
// {{ item.name }}
// </div>
这样 itemRefs.value[0] 就对应第一个 DOM 元素，后续可遍历操作：
- 确保
list是响应式数组（如来自ref或computed），否则索引可能错位 - 注意：若
list动态增删，需同步清理itemRefs.value中冗余项（例如用onUpdated重置并重新收集） - 首次渲染时
itemRefs.value是空数组，需等 DOM 挂载后才填入真实元素
用 reactive 对象 + key 映射，更灵活安全
当列表项有唯一 ID（推荐），用 reactive({}) 存储 DOM 引用，key 为 item.id，避免索引偏移问题：
const itemRefs = reactive({})
// 模板中
// <div v-for="item in list" :key="item.id" ref="el => { if (el) itemRefs[item.id] = el }">
// {{ item.name }}
// </div>
使用时直接按 ID 访问：itemRefs['abc123']。优势明显：
- 增删项不影响已有引用，无需手动同步数组长度
- 支持异步加载后追加 DOM，ref 自动更新
- 类型更清晰（TS 中可定义
Record<string htmlelement></string>）
配合 onMounted / onUpdated 确保 DOM 就绪
ref 赋值是异步的，不能在 setup 同步代码中立刻访问。需在生命周期钩子中操作：
-
onMounted：首次挂载后批量处理所有 DOM 元素（适合初始化聚焦、测量尺寸等） -
onUpdated：当list更新后，可检查itemRefs是否完整，对新增项做额外处理（如动画入场） - 避免在
watch中直接读取itemRefs并操作 DOM，易触发重复执行
不推荐：用 ref(null) + v-for 绑同一个 ref
常见误区：写 ref="itemRef" 在 v-for 内 —— 这会导致只有最后一个元素被保留，前面的被覆盖。Vue 不支持一个 ref 绑多个元素。必须用数组或对象结构显式管理多个引用。
