Vue 关于nexttick的理解和使用场景

应用场景

需要在视图更新之后，基于新的视图进行操作

文档说明

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

nexttick的3个使用场景

1. 控制输入框的显示隐藏,点击按钮显示输入框，获取焦点

showsou(){
  this.showit = true //修改 v-show
  document.getElementById("keywords").focus()  //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
}

修改为

showsou(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}

2. 点击获取元素宽度。

<div id="app">
    <p ref="myWidth" v-if="showMe">{{ message }}</p>
    <button @click="getMyWidth">获取p元素宽度</button>
</div>

getMyWidth() {
    this.showMe = true;
    //this.message = this.$refs.myWidth.offsetWidth;
    //报错 TypeError: this.$refs.myWidth is undefined
    this.$nextTick(()=>{
        //dom元素更新后执行，此时能拿到p元素的属性
        this.message = this.$refs.myWidth.offsetWidth;
  })
}

3.使用 swiper 插件通过 ajax 请求图片后的滑动问题。

• 初始化方法

swiperInit() {
   var mySwiper = new Swiper('.swiper-container', {
     pagination : '.swiper-pagination',
     paginationType : 'bullets',
     autoplay : 2000,
     observer:true,
     observeParents:false
   })
 }

• 获取数据

getData:function(){
  var _this=this;
  //此处设置sw_flag变量的目的在于控制swiper显示关闭开关，当数据重新请求时，先关闭swiper，请求完毕数据再重新渲染页面；
  _this.sw_flag=0;
  XXX.ajax({
    url: '...',
    success: (r)=> {
      if(!!r.ret){
        _this.banners=r.ret.banners||"";
        _this.sw_flag=1;
        //此时获取到数据再初始化swiper
        _this.$nextTick(function(){
          if(!!_this.banners.length){
            _this.swiperInit();
          }
        });
      }
    }
  })
}

可以解决Vue使用swiper动态加载数据，动态轮播数据显示白屏问题处理

如果有任何问题可以和我一同交流哦。如果对你有用的话，感谢一键3连啦。拜┏(＾0＾)┛