浅谈Vue与swiper轮播图框架结合小案例

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

那么Vue与swiper的结合，就显的至关重要了，下面简单介绍一下Vue与swiper结合使用的小案例

首先，在引入了各个js与css文件以后，写入页面结构

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
    </div>

 

在script标签中对swiper进行实例

        var mySwiper = new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项
        }) 

这时，一个简单的swiper轮播图小案例就实现了。

此时，我们可以通过定义一个Vue实例，来实现swiper内部轮播页的遍历。

        new Vue({
            el:"#app",
            data:{
                dataList:[1,2,3]
            },
            mounted(){
                new Swiper('.swiper-container',{
                    loop:true
                })
            }
        })

将页面结构的类名为swiper-slide的标签通过v-for指令，来进行遍历

<div class="swiper-slide" v-for="data in dataList" :key='index'>{{data}}</div>

因为在以上正常实例化的过程当中，没有进行一个ajax的异步请求操作，所以我们才可以直接在生命周期的mounted钩子函数当中直接进行实例化，因为此时已经出现了真实dom树。

但是我们在正常的项目交互当中，肯定是需要请求后端发送过来的数据，这就需要在created钩子函数中进行异步数据请求，此时，如果我们再在mounted中进行swiper的实例化，那么问题就来了。

在这个地方，我们用setTimeout延时器的方式，来模拟异步请求数据，比如以下代码：

        new Vue({
            el:"#app",
            data:{
                dataList:[]
            },
            created(){
                setTimeout(()=>{
                    this.dataList = [1,2,3]
                })
            },
            mounted(){
                new Swiper('.swiper-container',{
                    loop:true
                })
            }
        })

此时，我们会很明显的发现，运行出来的swiper轮播图，有很大的bug，它无法正常使用了，这是为什么呢？

这是因为我们通过延时器改变Vue自身数据的时候，会再进行一次虚拟dom树比对，然后进行diff算法，渲染成真实dom树这一个流程，此时，我们mounted钩子函数中的实例早已经完成了， 所以造成了我们的swiper轮播图无法正常使用了

那此时我们是不是该想，什么时候可以执行这个实例化呢，那么答案肯定是updated钩子函数中

因为updated钩子函数中，数据已经挂载完毕，数据也已经改变了，并且已经生成了新的真实dom树，所以，在这个钩子函数中，我们页面中所有真实dom都已经存在了，在这里面进行我们的实例化，就不会出现上面我们所描述的问题了。

            updated(){
                new Swiper(".swiper-container",{
                    loop:true
                })
            }

这是初步解决异步请求数据，导致实例化位置需要改变的一个方法，还有其他的比较好用的方法，欢迎大家一起来讨论学习