最近公司项目中用到了swiper组件，项目用的vue搭建的，其实一开始是打算自己写的，但是考虑到项目工程其他地方已经引过swiper，为了不重复造轮子，打算用swiper来做；
需求场景很简单，大致就是这样一个页面结构
image
顶部通知栏轮播用的swiper，通过接口拉到的数据来上下滚动轮播
下方有一个手机号的表单提交
结果问题就出在这里
当我输手机号的时候，页面会特别卡，每输入一个数字都会很卡，数字进入input都会有延迟
后来用Chrome的调试工具找了很久，发现问题出在swiper上，
由于我的swiper组件和下面的内容使写在一个页面组件里的,每次我在input里输入一个字符时，都会触发一次swiper的重新计算，造成页面的回流，导致卡顿。
解决办法
后来我将swiper抽出来做一个单文件vue组件，这样，我再操作input的时候，swiper组件不会触发相应的更新了，页面正常了。
这个问题应该是在swiper和vue的数据渲染机制造成的，具体原因还需要自己再去琢磨，总而言之分享一下自己的一点心得。
网友评论