第四十二篇 nextTick

在前面封装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。感谢大家的支持！