Vue.js中ref在v-for循环中的引用绑定实战

在 Vue.js 中使用 ref 绑定 v-for 循环渲染的多个 DOM 元素或组件时，直接使用字符串 ref 会导致引用被覆盖、仅保留最后一个元素，造成功能失效；本文深入剖析了这一常见陷阱，并给出两种健壮解决方案：一是利用响应式数组配合函数式 ref 按索引安全收集引用，适用于静态列表；二是采用以唯一 key（如 item.id）为键的对象 ref，完美适配动态增删、排序等复杂场景——无论操作 DOM 还是调用子组件方法，都能精准、稳定、可维护地实现引用管理。

在 Vue.js 中使用 ref 绑定循环渲染（v-for）中的 DOM 元素或组件时，不能直接用字符串名，必须借助数组或对象来收集多个引用，否则只会保留最后一个元素的引用。

ref 不能写成字符串，要用数组或对象承接

很多人初学时会这样写：

<div v-for="(item, i) in list" :key="i">
  &lt;input ref=&quot;inputRef&quot; :value=&quot;item&quot; /&gt;
</div>

结果发现 this.$refs.inputRef 只是最后一个 input 的 DOM 引用，前面的都被覆盖了。这是因为字符串形式的 ref 在循环中会被重复赋值，最终只保留最后一次绑定。

正确做法是使用函数式 ref 或数组式 ref：

• 推荐用 数组 ref：在 setup 中定义响应式数组，v-for 中用函数式 ref 按索引存入
• 也可用 对象 ref：以唯一 key（如 id 或索引）为属性名动态赋值

setup 中用数组 ref 收集多个 DOM 引用

在组合式 API 中，可这样安全绑定：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const inputRefs = ref([])

    const list = ref(['a', 'b', 'c'])

    onMounted(() => {
      // 此时 inputRefs.value 是包含三个 input DOM 节点的数组
      console.log(inputRefs.value) // [input, input, input]
      inputRefs.value[0]?.focus() // 聚焦第一个输入框
    })

    return {
      list,
      inputRefs
    }
  }
}

模板中配合写法：

<div v-for="(item, i) in list" :key="i">
  &lt;input 
    :ref=&quot;el =&gt; { if (el) inputRefs.value[i] = el }" 
    :value="item" 
  />
</div>

注意：el => { if (el) ... } 是为了防止卸载时传入 null，避免数组污染。

给每个 ref 加唯一标识（适合动态增删场景）

当列表支持添加、删除、排序时，用索引做数组下标容易错位。更稳妥的方式是用唯一 key 关联 ref：

const inputRefs = ref({})

// 模板中
<input 
  v-for="item in list" 
  :key="item.id"
  :ref="el => { if (el) inputRefs.value[item.id] = el }"
  :value="item.text"
/>

这样即使顺序变化、中间删除，也能通过 item.id 精准定位对应 DOM。

ref 绑定组件实例也适用相同逻辑

如果 v-for 渲染的是自定义组件，ref 同样需要数组或对象承接：

<MyInput 
  v-for="item in list" 
  :key="item.id"
  :ref="el => { if (el) inputRefs.value[item.id] = el }"
/>

此时 inputRefs.value[item.id] 拿到的就是该组件实例，可调用其暴露的方法（需用 defineExpose）。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vue.js中ref在v-for循环中的引用绑定实战》文章吧，也可关注golang学习网公众号了解相关技术文章。