vue-awesome-swiper異步加載數據，初始化的loop不生效——解決及猜測

情景介紹

vue+typescript+vue-awesome-swiper項目，首頁輪播使用vue-awesome-swiper，banner數據從服務器端加載。
數據加載須要時間，若是直接載入vue-awesome-swiper，結果是swiperOption配置的loop: true不生效：

swiperOption: {
    loop: true,
}

猜測

猜想緣由就是初始化的時候沒有足夠的元素swiper-slide，因此沒有執行復制元素的操做，就沒有loop。
爲了驗證這個猜想，作了一下幾個嘗試：

1. 初始化banner長度爲1，服務器返回的長度爲4，運行。

   結果是loop依然沒有生效。
   ？loop沒響應或者缺乏監聽器observer

2. 加入observer: true屬性進行監聽，再運行。
   依然不生效。
   ？observer不生效
3. 瀏覽器控制檯執行元素刪除操做。

   滑塊的頁腳同時變化
   ！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的友情連接～