vue3中获取顺序对应的refs数组

vue3项目中需要动态增加或删减子组件，因此用到了vue3中建议的的这个方式

<div v-for="item in list" :ref="setItemRef"></div>

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    return {
      setItemRef
    }
  }
}

但是在使用过程中发现拿到的itemRefs数组的顺序与dom中组件的排列顺序不是一一对应的，大抵原因是因为ref的执行时机问题（具体要去翻下源码先，暂未有空）。

这就导致当在两个子组件中间插入一个新的子组件，会导致两个旧的子组件的ref函数先于新的子组件先执行，先push到了数组中。

itemRefs数组中的值变成了[第1个组件ref,第3个组件ref,第2个组件ref]

那怎么保证数组顺序对应呢？目前只想到了用闭包方式，代码如下：

<div v-for="(item, index) in list" :ref="setItemRefFactory(index)"></div>

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRefFactory = index => {
      return (el) => {
        if (el) {
          itemRefs.splice(index, 0, el);
        }
      }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    return {
      setItemRef
    }
  }
}

目前只想到这个方式，不知道有没有更优雅的方式，欢迎指教~