轮播图中使用 $nextTick( )

nextTick()简单理解

问题：轮播图数据量大，dom还没有渲染完成，就 v-for循环了轮播图。会报错，所以这里使用

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

     

          

               

                  
              
         
         
         


         
         

         

     

   data(){
         return{
             bannerList:[]
         }
     },

   watch:{
       bannerList:{
           immediate:true,
           handler(){
                //等待最近的一次渲染完成, 再执行回调中的代码    
                this.$nextTick(()=>{
                     new Swiper (this.$refs.mySwiper, {
                        loop: true, // 循环模式选项
                        
                        // 如果需要分页器
                        pagination: {
                        el: '.swiper-pagination',
                        },
                        
                        // 如果需要前进后退按钮
                        navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                        },
                        
                        // 如果需要滚动条
                        scrollbar: {
                        el: '.swiper-scrollbar',
                        },
                    })     
                })
           }
       }
   },