在 Vue.js 中用 ref 绑定 v-for 元素时，必须用数组或对象收集引用，字符串 ref 会导致只保留最后一个；推荐函数式 ref 配合响应式数组或唯一 key 对象，支持 DOM 和组件实例引用。

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

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

很多人初学时会这样写：

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

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

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

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

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">
  <input 
    :ref="el => { 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）。