Vue-----this.$nextTick()

Vue-----this.$nextTick()

$nextTick

Vue.nextTick()是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM（dom的改变是发生在nextTick()之后）
这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来

Vue.nextTick()作用：在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom

在以下两个情况下需要用到Vue.nextTick()

1.Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

例如vue的插件BScroll滚动轴插件

<div class="menu-wrapper" ref="menuwrapper">
  <ul>
    <li v-for="itemgood in goods" class="menu-item">
      <div class="goodsli">
        <span class="text">
           <span v-show="itemgood.type > 0" class="icon" :class="classmap[itemgood.type]"></span>{{itemgood.name}}
        </span>
      </div>
    </li>
  </ul>
</div>
export default{
    created(){
        axios.get('../static/data.json').then((response) =>{
            this.goods = response.data.goods;
            this.$nextTick(() => {
                this._initScroll();
            })
        })
    },
    methods:{
      _initScroll(){
          this.menuScroll = new BScroll(this.$refs.menuwrapper,{});
      }
    }
}

显示弹窗重置表单，重置必须放到nextTick中，否则找不到menuForm

showDialog(){
          this.dialogVisible = true
          this.$nextTick(() => {
            this.$refs.menuForm.resetFields()
          })
 }