应用场景:
1.在vue的created生命周期中,进行的DOM操作,必须放置Vue.nextTick(()=>{})中
原因:因为created周期的完成后,实际上DOM元素还没有进行渲染.
2.需要在数据发生后执行的一项操作,同时该操作需要使用随数据变动而发生变化的DOM结构时,那这个操作也需要放置在Vue.nextTick(()=>{})中.
原因:vue执行DOM更新是异步的,当监听到数据发生变化时,vue会开启一个队列,缓存对将要发生变化的值,等待数据变化结束,最后统一一次替换DOM中的元素.
用个例子来看:
html:
<div id="app">
<div ref="number">{{value}}</div>
</div>
js:
new Vue({
el:"#app",
data:{
value:0
},
methods:{
},
mounted(){
//改变数据
this.value = 1
//获取DOM元素
console.log(this.refs["number"].innerHTML) //得到的结果以为是1,而恰恰结果是0
this.$nextTick(()=>{
console.log(this.refs["number"].innerHTML) //得到的结果才是改变之后的1
})
}
})
简单一句话:就是如果你想要在当前函数内改变数据,同时想要在当前函数内获取改变后的DOM元素对其进行操作时,你就需要使用这个方法