Vue.nextTick() 获取更新后的DOM;

2017-07-27

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

nextTick的由来：

由于VUE的数据驱动视图更新，是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

nextTick的触发时机：

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

应用场景：

在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。

什么时候需要用的Vue.nextTick()

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

代码示例

this.$http.get('goods').then(function(data){
    this.goods = data.body;
    //判断dom结构是否完全加载 this.$nextTick(() => {}) 保证dom渲染完毕
    this.$nextTick(function(){
      this._initScroll();//左右两侧的被隐藏的部分滚动起来
      this._calculateHeight();
    });
},function(){
    console.log('数据请求错误')
})

总结

Vue.nextTick() 获取更新后的DOM
this.$nextTick(function(){})
Vue.nextTick(function(){})