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字                

            

            
            

                
                
相关内容

                
            

            

            
            

                 

            



        

        
    

    

    
    

        
        

            
            

                
                

                    
                    

                        
                        热门资讯
                        
                    

                    
                

                
            

            
            
            


                                
                

                    
                    
                    
                    
                    

                        一艘卡塔尔液化天然气运输船驶向...
                        经济观察网 据央视新闻客户端消息，当地时间5月9日，全球船舶实时追踪与海事数据平台“海事交通”（Ma...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        阿拉善盟一15GWh储能智能制...
                        （来源：内蒙古日报）转自：内蒙古日报本报阿拉善5月9日电  （记者  刘宏章  实习生  奥日其楞）...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        育种专员的阡陌初心
                        （来源：内蒙古日报）转自：内蒙古日报□本报记者  皇甫美鲜  海军　　夏日初临，生机勃发。5月8日，...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        一次跨越千里的寻亲祭扫
                        新甘肃·甘肃日报记者 顾丽娟 今年清明节期间，80岁的军休干部陈昌林在省军队离退休干部第二休养所工作...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        打通农村物流服务“最后一公里”
                        　　2025年年末，拼多多“免费送货入村”项目正式落地铜川。一份份贴着“多多进村”标识的包裹，顺着城...