最近公司項目中用到了swiper組件巨朦，項目用的vue搭建的米丘，其實一開始是打算自己寫的，但是考慮到項目工程其他地方已經(jīng)引過swiper运敢，為了不重復(fù)造輪子幽污，打算用swiper來做跟畅；
需求場景很簡單，大致就是這樣一個頁面結(jié)構(gòu)
image
頂部通知欄輪播用的swiper堕扶，通過接口拉到的數(shù)據(jù)來上下滾動輪播
下方有一個手機號的表單提交
結(jié)果問題就出在這里
當(dāng)我輸手機號的時候碍脏，頁面會特別卡，每輸入一個數(shù)字都會很卡稍算，數(shù)字進(jìn)入input都會有延遲
后來用Chrome的調(diào)試工具找了很久典尾，發(fā)現(xiàn)問題出在swiper上，
由于我的swiper組件和下面的內(nèi)容使寫在一個頁面組件里的,每次我在input里輸入一個字符時邪蛔，都會觸發(fā)一次swiper的重新計算急黎，造成頁面的回流，導(dǎo)致卡頓侧到。
解決辦法
后來我將swiper抽出來做一個單文件vue組件勃教，這樣，我再操作input的時候匠抗，swiper組件不會觸發(fā)相應(yīng)的更新了故源，頁面正常了。
這個問題應(yīng)該是在swiper和vue的數(shù)據(jù)渲染機制造成的汞贸，具體原因還需要自己再去琢磨绳军，總而言之分享一下自己的一點心得。
