第三十七篇 Vue中封装Swiper组件

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

template:`
    <div>
        <div class="swiper-container author" >
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="" />    
                div>
                <div class="swiper-slide">
                    <img src="" />        
                div>
                <div class="swiper-slide">
                    <img src="" />    
                div>
            div>
        <div class="swiper-pagination">div>
        div>
    div>
`,

<div id="app">
    <swiper>
        <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index"> 
            <img :src="item" />    
        div>
    swiper>
div>
<script>
 
// swiper组件
Vue.component("swiper",{
    template:`
        
            
                
                    
                

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

        显然不是，在上一篇内容结尾和本篇开头就讲过了在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. 编写代码：

<div id="app">
    <swiper :key="swiperList.length">
        <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index"> 
            <img :src="item" />    
        div>
    swiper>
div>
<script>
Vue.component("swiper",{
    template:`
        
            
                
                    
                
            
            
        
    
    `,
    mounted(){
        new Swiper(".author",{
            loop:true,
            autoplay:{
                delay:2000
            },
            pagination:{
                el:'.swiper-pagination'
            }
        })
    }
})
 
new Vue({
    el:'#app',
    data:{
        swiperList:[]  // 请求的数据容器
    },
    mounted(){
        // 模拟发起ajax请求
        setTimeout(()=>{
            this.swiperList = [ 
                'https://s2.loli.net/2022/07/18/1nMDLzF35hsYZ8t.jpg' ,
                'https://s2.loli.net/2022/07/18/yFXUisGht9x5PjY.jpg' ,
                'https://s2.loli.net/2022/07/18/8WhpU5EDQTySONY.jpg' ]; 
        },2000)
        console.log("mounted");
    }
})
script>

2. 测试效果：

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

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

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

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

<script>
Vue.component("swiper",{
    ...
    mounted(){
        new Swiper(".author",{
            loop:true,
            autoplay:{
                delay:2000
            },
            pagination:{
                el:'.swiper-pagination'
            }
        })
        console.log("mounted");
    },
    destoryed(){
        console.log("destoryed");
    }
})
 
new Vue({
    el:'#app',
    data:{
        swiperList:[]  // 请求的数据容器
    },
    mounted(){
        // 模拟发起ajax请求
        setTimeout(()=>{
            ...
        },2000)
        console.log("mounted");
    }
})
script>

 测试效果：

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