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滚动轴插件

  

    

      

        
           {{itemgood.name}}
        
      
    
  

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