vue 3 中需用 ref([]) 声明响应式数组，配合函数式 ref 按索引赋值子组件实例，再通过 onupdated 或 nexttick 安全访问；命名 ref 自动转数组仅适用于静态 v-for 场景。
在 Vue 3 的 Composition API 中，使用 v-for 渲染多个子组件并动态收集它们的实例（即获取一组子组件的 ref），不能直接用单个 ref 绑定，而需要借助 ref 数组 + onUpdated 或 nextTick 确保 DOM 更新后正确赋值。
✅ 正确声明 ref 数组
用 ref([]) 创建一个响应式数组，用于存储每个子组件的实例：
import { ref, onUpdated, nextTick } from 'vue'
const childRefs = ref([])
✅ 在 v-for 中绑定 ref 并自动推入数组
模板中对每个子组件使用函数式 ref，在渲染时将实例 push 进数组（注意：不能用索引直接赋值，因为 v-for 可能重排）：
<childcomponent v-for="(item, index) in list" :key="item.id" :ref="(el) => { if (el) childRefs.value[index] = el }"></childcomponent>
说明：
- 函数式
ref会在每次元素挂载/卸载时触发，el为组件实例（非原生 DOM） - 用
index对应位置赋值，确保顺序与v-for一致；if (el)避免卸载时写入 null - 不要用
childRefs.value.push(el)—— 顺序不可控，且重复渲染会累积
✅ 安全访问子组件方法或属性
由于 childRefs.value 是响应式数组，但其元素本身不是响应式，访问前需确认存在：
const triggerAllChildren = () => {
childRefs.value.forEach(child => {
if (child && typeof child.someMethod === 'function') {
child.someMethod()
}
})
}
常见注意事项：
- 首次渲染后，
childRefs.value才有值，建议在onUpdated或事件回调中使用 - 若依赖子组件尺寸/位置（如
getBoundingClientRect），需配合nextTick确保 DOM 已更新 - 列表项增删时，数组长度会变化，但旧索引可能残留 null，遍历时务必判空
✅ 替代方案：用模板引用名 + $refs（仅限 Options API 或 script setup 的简写）
如果不用 Composition API 的显式 ref 数组，也可用命名 ref（Vue 3.3+ 支持）：
<childcomponent v-for="(item, index) in list" :key="item.id" ref="childRefs"></childcomponent>
此时 childRefs 会自动变为数组（无需手动声明 ref([])），但需注意：
- 仅适用于静态
v-for（key 不变、无条件过滤） - 动态 key 或 v-if 干扰可能导致数组错位，仍推荐函数式 ref 更可控
