v-for实现绑定ref数组

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组
例如：
vue2

<div  v-for="(item,index) in list" :key="item.id" :ref="item.name"></div>
// 使用 console.log(this.$refs)
this.$refs.itemName[0]

vue3
先附上vue3官网推荐写法

<div v-for="(item,index) in list" :key="item.id">
    <div :ref="setItemRef"></div>
</div>

setup() {
    const state = reactive({
        list:[
            {
                id:"0001",
                name:"re1"
            },{
                id:"0001",
                name:"re1"
          }]
    })
    const itemRef = ref([])
    const setItemRef = (el) => {
      itemRef.value.push(el)
    }
    return {
         ...toRefs(state),
        setItemRef,
    }
}

实际使用过程中会发现setItemRef中出现重复的ref，导致无法正确捡出需要的dom。
主要原因是受vue的响应式系统影响，当绑定的这个元素发生变化的时候会触发ref，在使用push添加元素时, 会在更新的时候造成bug, 元素会重复。
之前尝试过利用Set去重，虽然可以保证setItemRef只有一个需要的对象，但是使用过程中仍然会报找不到对应dom。
后来在前辈这里找到了解决方案。直接贴代码：

<div v-for="(item, index) in list" :key="item.id">
    <div :ref="el => setItemRef[index]=el"></div>
</div>

setup(){
    const state = reactive({
        list:[
            {
                id:"0001",
                name:"re1"
            },{
                id:"0001",
                name:"re1"
          }]
    })
    const setItemRef = ref([]) 
    return {
        ...toRefs(state),
        setItemRef,
    }
}