nextTick

原文：https://segmentfault.com/a/1190000012861862

1、官方说明

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

2、异步说明

简单来说异步执行的运行机制：

• 所有同步任务在主线程执行，形成一个执行栈
• 主线程之外存在一个任务队列，用于存异步任务运行结果事件
• 执行栈所有同步任务执行完毕，系统就会任务队列里面事件
• 主线程重复上面动作

3、事件循环说明

简单来说，Vue在修改数据后，视图不会立即更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新

4、nextTick 用途

应用场景：需要在视图更新之后，基于新的视图进行操作

• 注意：在created和mounted阶段，如果需要操作渲染后的视图，也要使用nextTick 方法。

官方文档说明：

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

5、其他应用场景

• 点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

  // 会报错，修改为 nextTick
  showsou(){
    this.showit = true //修改 v-show
    document.getElementById("keywords").focus()  //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
  }
  
  // 修改
  showsou(){
    this.showit = true
    this.$nextTick(function () {
      // DOM 更新了
      document.getElementById("keywords").focus()
    })
  }
  

• 点击获取元素宽度。

  <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;
    })
  }
  

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