vue.nextTick()方法的使用详解

Posted 2021-05-28 shiyujian

什么是Vue.nextTick()？？
 

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

 

1 <template>
2 　　<div class="hello">
3　　　　 <div>
4 　　　　　　<button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
5 　　　　</div>
6 　　</div>
7 </template>

 

 1 export default {
 2 　　name: \'HelloWorld\',
 3 　　data () {
 4 　　return {
 5 　　　　testMsg:"原始值",
 6　　 }
 7 　　},
 8 　　methods:{
 9 　　　　testClick:function(){
10 　　　　　　let that=this;
11 　　　　　　that.testMsg="修改后的值";
12 　　　　　　console.log(that.$refs.aa.innerText); //that.$refs.aa获取指定DOM，输出：原始值
13 　　　　}
14 　　}
15 }

当使用Vue.nextTick()时，效果如下

1 methods:{
2 　　testClick:function(){
3 　　　　let that=this;
4 　　　　that.testMsg="修改后的值";
5 　　　　that.$nextTick(function(){
6 　　　　　　console.log(that.$refs.aa.innerText); //输出：修改后的值
7 　　　　});
8 　　}
9 }

相当于react中setState的回调函数