關於vue keep-alive配合swiper的問題

問題描述，首頁優化使用keep-alive以後，從別的頁面跳回來，swiper輪播不播放，查了很久資料，有的說要從新調用swiper的init方法進行初始化，等等，最終都沒能解決問題，最終經過查看文檔得知keep-alive緩存組件的是created鉤子會建立一個cache對象，用來做爲緩存容器，保存vnode節點。destroyed鉤子則在組件被銷燬的時候清除cache緩存中的全部組件實例。

由此猜測，從其餘頁面跳回來時，顯示的頁面可能只是vnode節點，還有渲染出html標籤就執行了new了swiper實例，致使swiper的實例沒法掛在到實際的html元素上，因此出現輪播沒法播放的問題。

解決方法：

　　keep-aive組件支持兩個鉤子，activated鉤子在keep-alive組件中代替了created鉤子每次初始化時調用activated，deactivated爲銷燬時的鉤子，因此能夠申明一個狀態，讓keep-alive組件渲染成html元素後再實例化swiper,就能夠解決這個bug。

開始上截圖！！

html代碼：

　　

js代碼：

　　

　　

 

此方法只是解決了我的需求，記錄下來主要是爲了提高記憶，若是能夠幫助到別人最好，若是幫助不到，請勿噴！！！