vue中的this.$nextTick

我们首先来看一下官方介绍：

将回调延迟到下次 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