首先要明白 nextTick()这个方法是干嘛用的
官网介绍：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

此时抛出疑问点
1、DOM 更新循环是指什么？ 答 :就是DOM也就是视图更新的循环
2、下次更新循环是什么时候？ 答：就是数据改变的时候，Vue内部会进行异步渲染
3、修改数据之后使用？ 答：因为DOM的变更是因为，数据变更会去渲染，但是这个过程是异步的，你刚赋值，此时页面还是没有变更的，所以这个作用就是一个延迟调用，只不过内部把这个callback（）函数调用了
4、在什么情况下要用到？答：大白话就是，你想什么操作，是在你视图发生改变之后，再去操作的行为

废话不多说上代码：

案例分析1： 如果有一个 隐藏的input 框 :v-show=‘false’，你把他显示出来并且让他获取焦点（反例）

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

正例

show(){
  this.show = true     //修改 v-show
  this.$nextTick( ()=>  document.getElementById("input").focus()  因为这是个异步函数，Vue会在dom变化完执行这个操作，所以可以)
}

案例分析2：获取元素宽度。

<div id="app">
    <div ref="myW" v-if="show">{{ message }}</div>
    <button @click="getMyW">获取div元素宽度</button>
</div>
getMyW() {
    this.show = true;
    //this.message = this.$refs.myW.offsetWidth;
    //报错 TypeError: this.$refs.myW is undefined
    this.$nextTick(()=>{
        //dom元素更新后执行，此时能拿到p元素的属性
        this.message = this.$refs.myW.offsetWidth;
  })
}

原理浅析：

image.png

参考:https://segmentfault.com/a/1190000012861862