nextTick的作用和使用场景

nextTick的作用和使用场景？

vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化

注意：数据更新和DOM更新不是同步，是异步的
使用场景

例如：改变dom元素，针对第三方插件(针对dom,swiper,滚动)的集成
<div class="boo">
     <div ref="box">{{msg}}</div>
     <button @click="getMsg">获取消息</button>
</div>
<script>
export default {
  name: "List",
  data() {
    return {
      msg: "可以在数据变化之后立即使用"
    };
  },
  methods: {
    getMsg() {
      console.log('前: ',this.$refs.box.innerHTML);
      this.msg = '1906A'
      this.$nextTick(()=>{
         console.log('hou: ',this.$refs.box.innerHTML);
      })
    }
  }
};
</script>