ref 被用來給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例。
當(dāng) v-for 用于元素或組件的時(shí)候，引用信息將是包含 DOM 節(jié)點(diǎn)或組件實(shí)例的數(shù)組
例如：
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官網(wǎng)推薦寫法

<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,
    }
}

實(shí)際使用過程中會(huì)發(fā)現(xiàn)setItemRef中出現(xiàn)重復(fù)的ref，導(dǎo)致無法正確撿出需要的dom。
主要原因是受vue的響應(yīng)式系統(tǒng)影響，當(dāng)綁定的這個(gè)元素發(fā)生變化的時(shí)候會(huì)觸發(fā)ref，在使用push添加元素時(shí), 會(huì)在更新的時(shí)候造成bug, 元素會(huì)重復(fù)。
之前嘗試過利用Set去重，雖然可以保證setItemRef只有一個(gè)需要的對(duì)象，但是使用過程中仍然會(huì)報(bào)找不到對(duì)應(yīng)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,
    }
}