在 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"> <li>后续操作：<code>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（而非数组索引）查找实例的场景，比如点击某条数据后滚动到对应卡片、或触发动画。