在前面封装swiper组件当中，通过许多种方式方法，其一从mounted初始化过早转到updated后出现初始化重复，再者通过设置key值和使用v-if控制swiper组件，然后通过Vue.diretive自定义指令的方式来封装swiper组件，那么本篇的nextTick其实也是为封装swiper组件遇到的问题提供另外一种解决思路：
nextTick
nextTick是什么呢？即在下次DOM更新循环结束之后执行延迟回调；在修改数据之后立即使用这个方法，获取更新后的DOM。
this.$nextTick()
下面来先通过一个简单的例子来了解nextTick的触发时机；
1. 编写代码
<div id="app"><p>{{myname}}</p></div>
<script>
new Vue({
el:'#app',
data:{
myname:'321nays'
},
mounted(){
console.log("mounted执行");
this.myname = 'syan123';
this.$nextTick(()=>{
console.log("nextTick执行");
})
},
updated(){
console.log("updated执行");
}
})
</script>2. 测试效果
mounted生命周期之后是updated生命周期，接着才是nextTick的触发时机，nextTick的执行比 updated 晚一些；nextTick 在 updated 修改数据完成立即使用这个方法this.$nextTick()可以获取更新的DOM。
Swiper 初始化问题
在前面封装swiper组件的时候碰到在mounted生命周期中swiper初始化过早的问题，但在updated 生命周期就有重复执行初始化问题，于是开始了寻找当数据以及准备好了插入DOM节点(父节点)之后再进行初始化工作这样一个时机，那么在现在有这样一个nextTick，它会在updated生命周期数据更新完成之后使用这个this.$nextTick()方法就可以获取到更新之后的DOM，那么只要在this.$nextTick()当中来做swiper的初始化工作不就可以解决swiper所带的问题导致swiper无法轮播。
1 .编写代码
<div id="app">
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperList" :key="item">
<img :src="item" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
swiperList:[]
},
mounted(){
// 模拟请求数据
setTimeout(()=>{
this.swiperList = [
'图片1.jpg' ,
'图片2.jpg' ,
'图片3.jpg' ];
// new Swiper(".author")
this.$nextTick(()=>{
new Swiper(".mySwiper",{
loop:true,
autoplay:true,
pagination:{
el:'.swiper-pagination'
}
})
})
},2000)
}
})2. 测试效果
通过nextTick解决了swiper轮播初始化过早的问题且swiper能够将图片进行一个正常的轮播；下面来测试如果有数据更新的话是否nextTick会被再次触发，会出现像updated生命周期那样会因为data数据状态的变化而导致swiper重复执行初始化工作；
通过添加按钮更新数据，在mounted、updated、nextTick触发时执行打印；
<button @click="add"> count : {{count}} </button>
data:{
count:0
},
methods:{
add(){
this.count ++
}
}
以上就是关于nextTick的内容了，关于nextTick主要知道如何来使用以及知道下次DOM更新循环结束之后执行延迟回调；在修改数据之后立即使用这个this.$nextTick，获取更新后的DOM。感谢大家的支持！
