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