java 異步 回調 script -i bsp ann 方法 new

說實話，這個$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()的理解