>[success] # v-for 中的 Ref 數組 ~~~ 1.在 Vue 2 中，在 v-for 里使用的 ref attribute 會用 ref 數組填充相應的 $refs property。 當存在嵌套的 v-for 時，這種行為會變得不明確且效率低下。 2.在 Vue 3 中，這樣的用法將不再在 $ref 中自動創建數組。要從單個綁定獲取多個 ref，請將 ref 綁定到 一個更靈活的函數上 (這是一個新特性) ~~~ >[info] ## vue2.x ~~~ 1.通過案例理解官網說的第一條'vue2.x' 幫我們把 'v-for' 綁定$refs將會自動生成一個refs的數組，自動將 一樣的ref綁定的值的數據歸并在一個數組中 ~~~ ~~~ <template> <div> <div v-for="(outter, outterIndex) in 5" :key="outterIndex" ref="OutTest"> <div v-for="(inner, innerIndex) in 5" :key="innerIndex" ref="inItem"> <!-- {{ item }} --> </div> </div> </div> </template> <script> export default { name: 'Test', mounted() { console.log(this.$refs) console.log(this.$refs.test) } } </script> ~~~ * 如圖  >[danger] ##### 看一個附加小問題 ~~~ 1.修改一下上面的案例將內外層的ref 命名都改成一樣的'inItem',由于這友好將統一名字的ref歸并在一個數組 的機制導致內外循環綁定的ref都在了一起 ~~~ ~~~ <template> <div> <div v-for="(outter, outterIndex) in 5" :key="outterIndex" ref="inItem"> <div v-for="(inner, innerIndex) in 5" :key="innerIndex" ref="inItem"> <!-- {{ item }} --> </div> </div> </div> </template> <script> export default { name: 'Test', mounted() { console.log(this.$refs) console.log(this.$refs.test) } } </script> <style></style> ~~~ * 如圖  >[info] ## vue3.x 使用 ~~~ 1.vue3并不會自動幫我們生成refs數組，只能得到最后一個元素的ref，想v-for 和 ref搭配需要手動去 創建變量來接受，ref 綁定一個方法 2.這個用來接收的變量不一定非要是數組 ~~~ ~~~ <template> <div> <p v-for="(item, index) in 5" :key="index+100" :ref="setItemRef">{{item}}</p> <p v-for="(item, index) in 5" :key="index" ref="test">{{item}}</p> <a ref="a1">1</a> <a ref="a2" @click="print">2</a> </div> </template> <script> export default { name: 'Test', mounted() { console.log(this.$refs) console.log(this.$refs.test) // 按照vue2的寫法取出來是v-for渲染的最后一個dom元素 }, data() { return { itemRefs: [] } }, methods: { print() { console.log(this.itemRefs) }, setItemRef(el) { this.itemRefs.push(el) }, } // beforeUpdate() { // this.itemRefs = [] // }, // updated() { // console.log(this.itemRefs, 11111) // } } </script> <style></style> ~~~ * 圖一  * 圖二看'itemRefs'  >[danger] ##### 注意 ~~~ 1.itemRefs 上面定義的是數組，也可以是對象 itemRefs: {} setItemRef(el) { let index = parseInt(Math.random(1) * 1000); this.itemRefs[index] = el; }, ~~~