nextTick的使用

---

前言

一、为什么用nextTick？

vue中的Dom更新是异步的，是异步的意味着当被处理数据是动态变化时，此时对应的Dom未能及时更新（同步更新）就会导致数据已经更新（model层已经更新）而视力层未更新（Dom未更新）此时就需要使用nextTick了。
当你想要拿到更新后的Dom，一定要在nextTic的回调函数中去获取更新后的Dom的值。
如`this.$nextTick(()=>{})

二、使用步骤

当我们引入swiper就需要用nextTick

代码如下（示例）

mounted(){
       findBanner().then((res) => {
        this.banner=res.result
     this.$nextTick(()=>{
            this.swipweli();//在这里获取dom更新后的值
       })
      })}

三、案例测试

---

代码如下（示例）

<template>
    <div>
      <ul ref="ul" id="ul">
        <li v-for="item in arr" :key="item">
         {{item }}
        </li>
      </ul>
      <button @click="add">添加数据</button>
    </div>
</template>
<script>

export default {
    data(){
       return{
        arr:[1,2,3,4]
       }
    },
    methods:{
        add(){
           console.log( document.querySelector('#ul').offsetHeight);
           console.log(this.$refs.ul.offsetHeight);
           this.arr.push(5)//vue数据变化后更新dom是异步的会有延迟的
           console.log(this.$refs.ul.offsetHeight);
           this.$nextTick(function(){
           console.log( document.querySelector('#ul').offsetHeight);//获取到最新的dom
             })
        }
    }
}

</script>