vue 3 中 v-for 不能用字符串 ref，必须用数组 ref（自动收集）或函数式 ref（精确控制）实现多元素独立引用，且 key 必须唯一稳定（如 item.id）。
Vue 3 中 v-for 循环里不能用字符串 ref（比如 ref="item"），否则所有元素会覆盖同一个引用，最终只剩最后一个。必须用可区分、可收集的方式动态绑定多个 ref，核心是“每个项独占一个引用位置”。
用数组 ref 自动收集（最简推荐）
Vue 3.2.25+ 支持直接将 ref 绑定到 v-for 元素上，框架会自动把每个 DOM 或组件实例按渲染顺序推入数组：
- 在
setup中定义：const itemRefs = ref([]) - 模板中写：
<div v-for="item in list" :key="item.id" ref="itemRefs">{{ item.name }}</div> - 挂载后
itemRefs.value就是包含全部对应元素的数组，索引与v-for顺序一致 - 可直接操作：
itemRefs.value[0]?.focus()、itemRefs.value.forEach(el => el.classList.add('active'))
用函数式 ref 精确控制（兼容性强）
适合需要按 id 存储、跳过某些项、或操作子组件实例的场景：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章