# v-for Array Refs
breaking
En Vue 2, cuando se utiliza el atributo ref
dentro de v-for
, la propiedad correspondiente $refs
será llenado con una matriz de refs. Este comportamiento se vuelve ambiguo y ineficiente cuando hay v-for
anidados.
En Vue 3, dicho uso no creará automáticamente una matriz en $refs
. Para recuperar múltiples refs de una sola vinculación de dato, vincula la ref
a una función que provea más flexibilidad (esta es una nueva característica):
<div v-for="item in list" :ref="setItemRef"></div>
1
Con la API de opciones:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Con la API de composición:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Note que:
itemRefs
no es necesario ser una matriz: puede también ser un objeto dónde las refs son establecidas mediante sus claves de iteración.Este también permite que
itemRefs
sea reactivo y observado, si es necesario.
# Estrategia de Migración
Indicadores de compilación de migración:
V_FOR_REF
COMPILER_V_FOR_REF