$nextTick()的理解

Posted 2020-11-17 zylily

说实话，这个$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的理解。