vue中的$nextTick很多人比较陌生,看下面这个场景
<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
<button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
showDiv: false
},
methods: {
getText: function(){
this.showDiv = true;
var text = document.getElementById('div').innerHTML;
console.log(text);
}
}
})
</script>
点击按钮抛出错误:Cannot read property 'innerHTML' of null
原因:vue观察到数据变化并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所有数据改变,在缓冲时会去除重复的数据,从而避免不必要的计算和DOM操作。在上面的例子中,执行“this.showDiv = true”时,div还没有创建出来,自然就会报错了,$nextTick就是用来知道什么时候DOM更新完成的,上面的代码修改如下:
getText: function(){
this.showDiv = true;
this.$nextTick(function(){
var text = document.getElementById('div').innerHTML;
console.log(text);
})
}
加上$nextTick之后就可以获取div的内容了。