[Vue.js 3.0] Migration – v-for Array Refs
# v-for Array Refs
breaking
breaking
In Vue 2, using the ref
attribute inside v-for
will populate the corresponding $refs
property with an array of refs. This behavior becomes ambiguous and inefficient when there are nested v-for
s present.
In Vue 3, such usage will no longer automatically create an array in $refs
. To retrieve multiple refs from a single binding, bind ref
to a function which provides more flexibility (this is a new feature):
<div v-for="item in list" :ref="setItemRef"></div>
With Options API:
export default {
data() {
return {
itemRefs: []
}
},
methods: {
setItemRef(el) {
if (el) {
this.itemRefs.push(el)
}
}
},
beforeUpdate() {
this.itemRefs = []
},
updated() {
console.log(this.itemRefs)
}
}
With Composition API:
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
}
}
}
Note that:
-
itemRefs
doesn't have to be an array: it can also be an object where the refs are set by their iteration keys. -
This also allows
itemRefs
to be made reactive and watched, if needed.
THE END
二维码