vue 中 v-for 多元素 ref 需用数组 ref（vue 3）或函数 ref（兼容写法）收集，避免覆盖；组件需 defineexpose 才能访问实例方法，且 key 必须唯一稳定。

在 Vue 中，v-for 渲染多个元素时，不能直接用同一个 ref 名称绑定多个 DOM 节点或组件实例——因为 ref 会覆盖，最终只保留最后一个。但你可以通过数组式 ref（Vue 3）或函数式 ref（Vue 2 / Vue 3 兼容写法）来收集多个引用。

✅ Vue 3：用数组 ref + v-for 自动收集

Vue 3 支持将 ref 绑定为数组，配合 v-for 会自动把每个子项的 DOM 或组件实例推入该数组：

• 在 setup() 中定义一个空数组 ref：
  const itemRefs = ref([])
• 在模板中这样绑定：
  
  {{ item.name }}
• 渲染后，itemRefs.value 就是包含所有对应 DOM 元素的数组，顺序与 v-for 一致，可直接操作：
  itemRefs.value[0]?.focus()、itemRefs.value.forEach(el => el.classList.add('active'))

✅ Vue 2 或需要精确控制时：用函数 ref（推荐兼容写法）

函数式 ref 更灵活，不受 Vue 版本限制，适合动态索引、条件跳过或组件实例获取：

• 在 data 或 setup 中定义空数组：
  data() { return { itemRefs: [] } }
• 模板中使用函数 ref：
  
  {{ item.name }}
• 注意：确保每次更新后清理旧引用（比如在 updated 钩子或 watch 中重置数组），避免残留；也可用 el => (this.itemRefs[i] = el || null) 安全赋值

✅ 获取组件实例（非原生 DOM）？记得用 defineExpose

如果你 v-for 渲染的是自定义组件，并想调用其方法或属性，需在子组件中显式暴露：

• 子组件（Vue 3 script setup）中加：
  defineExpose({ focusInput, resetForm })
• 父组件仍用数组 ref 或函数 ref 绑定，拿到的就是组件实例，可直接调用：
  itemRefs.value[0].focusInput()
• Vue 2 的组件默认暴露所有 methods/data，无需额外配置

⚠️ 注意事项和避坑点

• key 必须唯一且稳定：否则 ref 数组顺序错乱，甚至引用丢失
• 不要在 v-for 内部用计算属性或响应式对象作为 ref 名称：会导致 ref 无法正确收集
• 首次渲染后才能访问 ref 数组：在 onMounted（Vue 3）或 mounted（Vue 2）中操作更安全
• 如果列表可能为空，访问前先判空：
  if (itemRefs.value.length > 0) { ... }