在 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 中，可这样安全绑定：

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
    }
  }
}

模板中配合写法：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

<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 }"></myinput>

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！