官方解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。简单的说就是再DOM操作时,vue的更新是异步的,$nextTick 是用来知道什么时候 DOM 更新完成的。
举例:我们给一个div设置显示隐藏,当点击 button 的时候 #textDiv 先是被渲染出来,接着我们获取 #textDiv 的 html内容
<div id="app">
<div id="textDiv" v-if="isShow">这是一段文本</div>
<button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
el : "#app",
data:{
isShow: false
},
methods:{
getText:function(){
this.isShow= true;
var text = document.getElementById('textDiv').innnerHTML;
console.log(text);
}
}
})
</script>
这段代码表面上看不会有问题,但实际上点击报错,提示获取不到div元素,这里就涉及到 Vue 异步更新队列。