最近公司项目中用到了swiper组件，项目用的vue搭建的，其实一开始是打算自己写的，但是考虑到项目工程其他地方已经引过swiper，为了不重复造轮子，打算用swiper来做；

需求场景很简单，大致就是这样一个页面结构

顶部通知栏轮播用的swiper，通过接口拉到的数据来上下滚动轮播

下方有一个手机号的表单提交

结果问题就出在这里

当我输手机号的时候，页面会特别卡，每输入一个数字都会很卡，数字进入input都会有延迟

后来用Chrome的调试工具找了很久，发现问题出在swiper上，

由于我的swiper组件和下面的内容使写在一个页面组件里的,每次我在input里输入一个字符时，都会触发一次swiper的重新计算，造成页面的回流，导致卡顿。

解决办法 后来我将swiper抽出来做一个单文件vue组件，这样，我再操作input的时候，swiper组件不会触发相应的更新了，页面正常了。

这个问题应该是在swiper和vue的数据渲染机制造成的，具体原因还需要自己再去琢磨，总而言之分享一下自己的一点心得。