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

news2025/7/19 4:51:51

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

1. 静态的 swiper 组件

<div id="app">
    <swiper></swiper>
</div>

Vue.component("swiper",{
    template:`
        <div>
            <div class="swiper-container author" >
                <div class="swiper-wrapper">
                    <div class="swiper-slide">slider1</div>
                    <div class="swiper-slide">slider2</div>
                    <div class="swiper-slide">slider3</div>
                </div>
            <div class="swiper-pagination"></div>
            </div>
        </div>
    `
})

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

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

测试效果：

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

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>
`,

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

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

2. 动态的 swiper 组件

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

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

<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:`
        <div>
            <div class="swiper-container author" >
                <div class="swiper-wrapper">
                    <slot></slot>
                </div>
            <div class="swiper-pagination"></div>
            </div>
        </div>
    `
})

new Vue({
    el:'#app',
    data:{
        swiperList:[]  // 请求的数据容器
    },
    mounted(){
        // 模拟发起ajax请求
        setTimeout(()=>{
            // 假设请求回来的数据赋值给swiperList
            this.swiperList = [ 
                'http://图片链接1' ,
                'http://图片链接2' ,
                'http://图片链接3' ]; 
        },2000)
    },

    updated(){
        // swiper初始化
        new Swiper(".author",{
            loop:true,
            pagination:{
                el:'.swiper-pagination'
            }
        })    
    }
})
</script>

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

显然不是，在上一篇内容结尾和本篇开头就讲过了在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:`
        <div>
            <div class="swiper-container author" >
                <div class="swiper-wrapper">
                    <slot></slot>
                </div>
            <div class="swiper-pagination"></div>
            </div>
        </div>    
    `,
    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组件的话题！感谢大家一直以来的支持和粉丝朋友们！