v-for中使用ref获取多个实例的方法

在 Vue 3 中，使用 `v-for` 动态渲染多个元素时，若需精准获取每个组件或 DOM 实例的引用，必须摒弃字符串 ref（如 `ref="item"`），转而采用函数式 ref 或响应式数组 ref 等正确方案，并严格配合唯一稳定的 `key`（如 `item.id`）以避免因列表变动导致的引用错位；文章不仅详解了两种主流实现方式（动态函数式赋值与预初始化 ref 数组），还揭示了 key 与 ref 同步更新的关键细节，并进一步提供可复用的组合式函数封装技巧，助你高效、可靠地管理批量 DOM 操作与交互逻辑。

在 Vue 中，v-for 循环里直接用 ref 获取多个组件或元素实例，不能写成字符串（如 ref="item"），否则所有节点会覆盖到同一个 ref 上。正确做法是使用函数式 ref 或数组 ref，让每个循环项拥有独立引用。

用函数式 ref 为每个项分配唯一引用

Vue 3 支持将 ref 绑定为一个函数，每次渲染时调用它，传入当前 DOM 元素或组件实例。这样可精准控制每个循环项的引用存储逻辑。

示例：

<div v-for="(item, index) in list" :key="item.id">
  &lt;input :ref=&quot;(el) =&gt; { 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))
• 模板中：
• 后续操作：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（而非数组索引）查找实例的场景，比如点击某条数据后滚动到对应卡片、或触发动画。

终于介绍完啦！小伙伴们，这篇关于《v-for中使用ref获取多个实例的方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！