在上一篇内容的结尾讲到了将swiper初始化从mounted生命周期转移到updated中来能够让swiper动起来，但同时是否会造其他的一个问题？什么问题呢？在每次data中的状态发什么改变，updated中的内容会又重新执行，这样会导致swiper的初始化会重复的执行，如果封装成组件显然不合适，那么如何改进并将swiper封装成一个组件，封装为一个可复用性的组件；那么下面就来如何从静态的swiper组件再到一个动态可被复用的软件；

1.  静态的 swiper 组件

Vue.component("swiper",{template:`
slider1
slider2
slider3
`
})

        那么同样的，在组件内部如何来设置 swiper 的初始化，先来mounted生命周期中进行swiper的初始化；

mounted(){new Swiper(".author",{loop:true,autoplay:{delay:2000},pagination:{el:'.swiper-pagination'}})
}

测试效果：

        结果与先前在页面当中静态使用swiper一致，并没有太多需要注意的问题，现在将数据换成图片进行轮播，在template模板上就需要添加一个容器放置图片：

template:`
    
        
    

`,

        测试效果符合预期，静态的使用swiper并没有什么问题； 

        显然静态的这样一个组件根本就不能够达到想要进行复用，因为对应的轮播数据已经被固定写死了，在实际当中我们是通过异步请求数据然后将数据给到swiper组件；

2. 动态的 swiper 组件

        既然静态的封装swiper组件不具备可复用性和灵活性，那么下面来改造一下；既然不能够将轮播的数据固定，那么把轮播的内容提取出来，通过插槽的形式；将请求回来的数据通过v-for的指令进行渲染；

        在mounted生命周期中发起数据请求，然后赋值给swiperList，最后进行swiper的初始化，那么看过上一篇内容就知道swiper动态的使用会有这样的一个问题就是swiper的初始化过早，会选择在updated当中去初始化才能够让swiper滚动起来，那么同样来测试一下：

测试效果：能够实现轮播，也有对应的指示器，这样我们是不是就成功了呢？

        显然不是，在上一篇内容结尾和本篇开头就讲过了在updated生命周期当中来初始化能够解决swiper组件能够动起来的燃眉之急，但问题也随之接踵而来，当data数据状态改变，updated会重复的初始化swiper，那么既然要让swiper只执行初始化一次又能够让swiper组件动起来，那么不能够在updated生命周期中，只能是从mounted生命周期中进行swiper的初始化；

key值

        还记得key值吗？在前面的内容当中我们已经多次的提及到了设置key值的内容，在 Vue 当中对于DOM的更新是先通过虚拟DOM进行diff之后再进行patch最后才会在页面中更新真实DOM，那么在进行虚拟DOM的对比，讲过使用index索引值和key值的对比方式，在mounted生命周期当中出现的问题就是初始化过早，那么在未收到数据之前swiper已经创建完成了，当收到数据的时候会进行新旧数据的对比，这一对比会发现swiper组件并没有任何变化，仅仅是内部数据发生变化，Vue为了提高这个用户体验提高效率将这个新数据替换到旧数据当中去；

|| 通过上面的描述来进行一次编写测试效果，然后再来进一步的了解整个过程：

1. 编写代码：

2. 测试效果：

         swiper组件能够正常的轮播起来，这样是一来避免之前在updated生命周期当中做swiper的初始化从而导致data数据状态一改变而引起在updated中swiper的一个重复初始化工作；

 下面用图示来进一步讲解：

         通过设置key的形式让前后虚拟DOM的对比使得swiper在swiperList有数据的情况下能够进行初始化，以此才能够让swiper动起来；

        在下面这里来进行一个验证，是否进行 mounted —— destoryed （key=0）—— mounted（key=3）:

 测试效果：

        通过设置key的方式能够解决在mounted中初始化过早和在updated中会因data数据状态的改变而频繁初始化swiper的问题；那么swiper组件的封装就到此结束了吗？当然没有，为了使篇幅不过长和内容的渐进性，在下一篇内容当中继续本篇在Vue中封装swiper组件的话题！感谢大家一直以来的支持和粉丝朋友们！