Vue 3.0 v-for中的Ref数组
创始人
2025-05-28 07:09:35

Vue 3.0 v-for中的Ref数组

在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。

在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)：

 



结合选项式 API:
 

 

 

  1. export default {
  2. data() {
  3. return {
  4. itemRefs: []
  5. }
  6. },
  7. methods: {
  8. setItemRef(el) {
  9. this.itemRefs.push(el)
  10. }
  11. },
  12. beforeUpdate() {
  13. this.itemRefs = []
  14. },
  15. updated() {
  16. console.log(this.itemRefs)
  17. }
  18. }


结合组合式 API:
 

 

 

  1. import { ref, onBeforeUpdate, onUpdated } from 'vue'
  4. export default {
  5. setup() {
  6. let itemRefs = []
  7. const setItemRef = el => {
  8. itemRefs.push(el)
  9. }
  10. onBeforeUpdate(() => {
  11. itemRefs = []
  12. })
  13. onUpdated(() => {
  14. console.log(itemRefs)
  15. })
  16. return {
  17. itemRefs,
  18. setItemRef
  19. }
  20. }
  21. }


注意：
 

 

  • itemRefs 不必是数组：它也可以是一个对象，其 ref 会通过迭代的 key 被设置。
  • 如果需要，itemRef 也可以是响应式的且可以被监听。
                
            

            
            

                
               
            

            

                

                    上一篇：断崖式难度的春招，可以get这些点

                

                

                    下一篇：最新或2023（历届）游北京故宫作文300字 一篇关于北京故宫的作文400字 关于游览北京故宫的作文300字                

            

            
            

                
                
相关内容

                
            

            

            
            

                 

            



        

        
    

    

    
    

        
        

            
            

                
                

                    
                    

                        
                        热门资讯
                        
                    

                    
                

                
            

            
            
            


                                
                

                    
                    
                    
                    
                    

                        最新或2023（历届）“土”表...
                        我有一个表弟，今年4岁了，从小跟着农村的姥姥长大。他胖乎乎的身体，一摸肉呼呼的。梳着小平头，脑后边有...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        最新或2023（历届）夏夜二年...
                        夏天的夜晚非常美。你瞧，公园的池塘边，小草进入了梦乡；几只萤火虫在微光下提着小巧玲珑的灯笼飞舞。在池...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        最新或2023（历届）洗碗二年...
                        吃过晚饭，我帮妈妈洗碗。我来到厨房，一堆碗无精打彩地躺在水池里，正等着我帮它们洗澡呢！我卷起袖子，把...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        最新或2023（历届）品咖啡二...
                        热气腾腾地从杯里飘向空中，丝丝缕缕，融入了空气终的不见了，但空气中依然弥留着咖啡的纯香。把杯子拢在手...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        最新或2023（历届）这儿真美...
                        一天，小刚和我一起来到了一个大山脚下，我们被这迷人的景象所陶醉了。“瞧”蓝蓝的天空上不时飘来几朵白云...