我们首先来看一下官方介绍:
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
理解:总结来说,假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印出这个被改变的文本内容
是需要dom更新之后才会实现的,这就好比我们将打印出的代码放在setTimeout(fn,0)中;
我们来看具体的实例:
1 <template> 2 <button ref="btn" type="button" name="button" @click="testclick">{{content}}</button> 3 </template> 4 export default{ 5 data(){ 6 return{ 7 content:'初始值' 8 } 9 } 10 }
1 methods:{ 2 testClick(){ 3 this.content='改变值'; 4 //此时我们直接打印的话,因为dom元素还没有更新,所以打印出来 5 //的是改变之前的值 6 console.log(this.$refs.btn,innerText);//改变前的值 7 } 8 }
这个时候如果我们想要获取更新之后的值,就要用到this.$nextTick,
this.$nextTick这个方法作用是当数据被修改后,我们使用这个方法回调获取更行之后的dom再render出来
//方法 methods:{ testClick(){ this.constent="改变值"; this,$nextick(()=>{ //dom元素更新之后再执行,因此处能正确打印改变之后的值 console.log(this.$refs.btn.innerText);//改变后的值 }) } }
文章参考:https://blog.csdn.net/qq_33207292/article/details/80769256