$nextTick()的理解

Posted zylily

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了$nextTick()的理解相关的知识,希望对你有一定的参考价值。

说实话,这个$nextTick()这个的用法之前一直都没有搞懂,看了很多篇博客,$nextTick是用来知道什么时候domg更新完成的,

vue实现响应式并不是数据发生变化后dom立即变化,而是按照一定的策略来进行dom更新。

$nextTick是在下一次dom更新循环结束之后执行延迟回调,在修改数据之后使用这个方法,立即更新dom.

关于这点可以好好的看下vue官方的异步更新队列这部分的内容。

下面可以来看两个例子:

div id="app">
<div v-if="showText" id="text">想要知道这段文字写的是什么?</div>
<button @click="clickMe">点我试试看就能知道那段隐藏的文字写的是什么了?</button>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
//利用定时器的方法获取
new Vue({
el:‘#app‘,
data:{
showText:false
},
methods:{
clickMe:function(){
this.showText=true;


var text=document.getElementById(‘text‘).innerhtml;
alert(text);

}
}
})

如果我们这样写你会发现浏览器会报错 这个错:Uncaught TypeError: Cannot read property ‘innerHTML‘ of null

至于为什么会抛出这个错误:可以去看下异步队列更新就会明白原因了。

 

更改之后的:

new Vue({
el:‘#app‘,
data:{
showText:false,
},
methods:{
clickMe:function(){
this.showText=true;
this.$nextTick(function(){
var text =document.getElementById(‘text‘).innerHTML;
alert(text);
})
}
}
})

以上就是我对$nextTick的理解。

 

































以上是关于$nextTick()的理解的主要内容,如果未能解决你的问题,请参考以下文章

vue中nextTick的理解

简单易懂 关于nextTick()的理解

关于vue中的nextTick深入理解

$nextTick()的理解

Vue nextTick 理解

vue理解$nextTick