# Array Refs no v-for
breaking

No Vue 2, usar o atributo ref dentro do v-for irá preencher a propriedade $refs correspondente com um Array de refs. Este comportamento se torna ambíguo e ineficiente quando existem v-for aninhados.

No Vue 3, tal uso não mais criará automaticamente um Array em $refs. Para recuperar várias referências de uma única ligação, vincule ref à uma função que forneça mais flexibilidade (este é um novo recurso):

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

Com API de Opções:

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Com API de Composição:

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Observe que:

  • itemRefs não precisa ser um Array: também pode ser um objeto onde as referências são definidas por suas chaves de iteração.

  • Isso também permite que itemRefs sejam reativos e observados, se necessário.

# Migration Strategy

Migration build flags:

  • V_FOR_REF
  • COMPILER_V_FOR_REF