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>

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

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

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.

Estratégia de Migração

Sinalizadores na compilação de migração:

• V_FOR_REF
• COMPILER_V_FOR_REF