vue下的swipper插件

swipper插件里的轮播数据为动态数据的时候，为避免出现Swiper初始化过早从而导致轮播图插件失效情况的发生，可采取以下几种方式进行处理。

1. 使用updated生命周期
将swipper插件初始化代码放到updated生命周期下。解决问题的同时带来其他两个问题：
A. 如果其他状态更新 ,也会导致updated重复执行, 就会导致new Swiper多次初始化。
B. 没有复用性

<div class="swiper-container kerwin">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="data in datalist" :key="data">
      <img :src="data"/>
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
</div>

new Vue({
   el: "#box",
   data:{
     datalist:[]
   },
   mounted() {
     setTimeout(() => {
       this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
         "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
         "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
       ]
       // 初始化放在这会出现swipper初始化过早的问题。因为此时页面初始渲染完毕，页面上轮播的数据是为空的
       // 上面 设置了this.datalist 。页面的再次重新渲染完毕是在updated生命周期下。所以在mounted里不会再次重新渲染
     }, 2000)
   },
   updated(){
       console.log("updated","获取到更新后得dom,依赖于dom操作的库，需要知道状态更新完，什么时候dom更新。")
       new Swiper(".kerwin", {
         loop: true, //开启循环
         pagination: {
           el: '.swiper-pagination',
         }
       })
   }
 })

2. slot+props方式自定义组件
页面html引用swiper组件，这里loop为传入swiper组件的属性

<swiper :key="datalist.length" :loop="true">
   <div class="swiper-slide" v-for="item in datalist" :key="item">
    <img :src="item"/>
   </div>
</swiper>

swiper组件，slot用来占坑，是个匿名插槽。props用来接收父组件传递过来的参数

Vue.component("swiper",{
	props:{
	  loop:{
	    type:Boolean,
	    default:true
	  }
	  //好多其他属性.....
	},
	template:`
	<div class="swiper-container kerwin" style="height:300px">
	  <div class="swiper-wrapper">
	     <slot></slot>
	  </div>
	  <!-- 如果需要分页器 -->
	  <div class="swiper-pagination"></div>
	</div>`,
	mounted(){
	  console.log("mounted")
	  new Swiper(".kerwin", {
	      loop: this.loop, //开启循环
	      pagination: {
	        el: '.swiper-pagination',
	      }
	  })
	},
	destroyed(){
	  console.log("destroyed")
	}
})

根组件里初始化轮播图数据

new Vue({
  el: "#box",
  data:{
    datalist:[]
  },
  mounted() {
    setTimeout(() => {
      this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
        "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
        "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
      ]
    }, 2000)
  }
})

3. 使用$nextTick()

有了$nextTick()之后，我们就可以在mounted()钩子函数下进行初始化swiper插件。Vue.nextTick()方法会延迟一段时间执行。
例：

mounted() {
    setTimeout(() => {
        this.datalist = [
            "https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
        ]
        this.$nextTick(() => {
            console.log("我比updated还要晚")
            new Swiper(".kerwin", {
                loop: true, //开启循环
                pagination: {
                    el: '.swiper-pagination',
                }
            })
        })
    }, 2000)
}