模板指令-ref数组
在vue2中v-for绑定的$refs将会自动生成一个refs数组，但是在v-for中这种行为将会变得有歧义和不高效。
在vue3中，这种用法将不会被生效，因为vue3中不会自动生成refs数组，如果我们需要拿到多个的refs组成的数组，那么就需要使用函数的形式来手动绑定,也就是在vue3中v-for的ref需要绑定函数
在vue2中this.$refs得到的是一个数组
<body>
<div id="app">
<div v-for="(item,index) in list" :key="index" ref="setItemRef"></div>
</div>
<script>
new Vue({
el:"#app",
data(){
return {
list:[1,2,3]
}
},
mounted () {
console.log(this.$refs.setItemRef)
}
})
</script>
</body>
在vue3中执行以上的代码
<body>
<div id="app">
<div v-for="(item,index) in list" :key="index" ref="setItemRef">{{item}}</div>
</div>
<script>
const{createApp}=Vue
createApp({
data(){
return {
list:[1,2,3]
}
},
mounted () {
console.log(this.$refs.setItemRef)
}
}).mount("#app")
</script>
</body>
vue3不会自动生成一个refs数组，只能得到最后一个元素的ref，如果我们需要在v-for中绑定ref并生成refs数组，则需要使用函数的方式来绑定
<body>
<div id="app">
<!-- ref绑定函数 -->
<div v-for="(item,index) in list" :key="index" :ref="setItemRef">{{item}}</div>
</div>
<script>
const{createApp,onMounted}=Vue
createApp({
setup(){
let list=[1,2,3]
let itemRefs=[]
const setItemRef=(el)=>{
// el为每一个ref
console.log(el);
itemRefs.push(el)
}
onMounted (()=>{
console.log(itemRefs,'itemRefs')
})
return {list,setItemRef}
}
}).mount("#app")
</script>
</body>
