情景介绍vue+typescript+vue-awesome-swiper项目，首页轮播使用vue-awesome-swiper，banner数据从服务器端加载。数据加载需要时间，如果直接载入vue-awesome-swiper，结果是swiperOption配置的loop: true不生效：swiperOption: { loop: true,}猜想猜测原因就是初始化的时候没有足够的元素swiper-slide，所以没有执行复制元素的操作，就没有loop。为了验证这个猜测，做了一下几个尝试：初始化banner长度为1，服务器返回的长度为4，运行。结果是loop依然没有生效。？loop没响应或者缺少监听器observer加入observer: true属性进行监听，再运行。依然不生效。？observer不生效浏览器控制台执行元素删除操作。滑块的页脚同时变化！observer生效——loop不响应结论loop属性不是响应式的，数据变动之后不会自动初始化整个滑块解决开始的时候，想的办法是初始化设置init: false，获取数据之后再执行init()，可以解决该问题。后来看了一篇文章，可以对数据长度做一个判断：<swiper v-if=“banner.length > 0” :options=“swiperOption” ref=“mySwiper” @someSwiperEvent=“callback”>增加这个判断之后，loop的问题解决了。原因是只有banner.length > 0的时候，才会挂载swiper，只有挂在之后才会执行初始化的init操作，所以可以确保loop执行的时候，滑块元素swiper-slide是存在且完整的，完美解决！结语解决bug的友情链接～