在 Vue 中，v-for 循环需用函数式 ref 或数组 ref 实现多元素独立引用，禁用字符串 ref；须配唯一稳定 key（如 item.id），避免索引变动导致引用错位。
在 Vue 中，v-for 循环里直接用 ref 获取多个组件或元素实例，不能写成字符串（如 ref="item"），否则所有节点会覆盖到同一个 ref 上。正确做法是使用函数式 ref 或数组 ref，让每个循环项拥有独立引用。
用函数式 ref 为每个项分配唯一引用
Vue 3 支持将 ref 绑定为一个函数，每次渲染时调用它，传入当前 DOM 元素或组件实例。这样可精准控制每个循环项的引用存储逻辑。
示例：
<div v-for="(item, index) in list" :key="item.id">
<input :ref="(el) => { inputs[index] = el }" />
</div>
配合 setup 中定义响应式数组：
const inputs = ref([])
渲染后，inputs.value[0] 就是第一个 input 的 DOM 实例，inputs.value[1] 是第二个，依此类推。注意：需确保 list 长度变化时，inputs 数组能同步更新（比如用 watch 或计算属性维护）。
用 ref 数组 + v-for 索引安全绑定
提前初始化与列表等长的 ref 数组，再通过索引一一对应。适合列表长度稳定、或配合 key 精确控制的场景。
- 初始化：
const itemRefs = ref(Array.from({ length: list.length }).map(() => null)) - 模板中：
<div v-for="(item, i) in list" :key="item.id" :ref="el => itemRefs.value[i] = el"> - 后续操作：
itemRefs.value[2]?.focus()可聚焦第三个元素
避免常见坑：key 和 ref 更新不同步
v-for 中 key 必须唯一且稳定（推荐用 id 而非 index），否则 Vue 重用节点时，ref 函数可能被错误调用，导致引用错位。
例如：
- ❌ 错误写法：
v-for="(item, i) in list" :key="i"—— 插入新项后，index 变动，ref 函数会把新元素赋给旧索引 - ✅ 正确写法：
v-for="item in list" :key="item.id"—— 结合函数式 ref，能保证每个 item.id 对应的 ref 始终指向它自己的实例
进阶技巧：封装成组合式函数复用
把多 ref 管理逻辑抽成自定义 Hook，提升可读性与复用性：
function useRefs() {
const refs = ref({})
const setRef = (key, el) => {
if (el) refs.value[key] = el
else delete refs.value[key]
}
return { refs, setRef }
}
// 在组件中：
const { refs, setRef } = useRefs()
// 模板中：:ref="el => setRef(item.id, el)"
这种方式更适合需要按业务 ID（而非数组索引）查找实例的场景，比如点击某条数据后滚动到对应卡片、或触发动画。
