今天在浏览elementUI官网时,又一次看到了nextTick,其实nextTIck我已经不是第一次看到了,但之前都没怎么弄懂,这次决定好好研究一番……
异步说明
- vue是异步执行DOM更新的。vue实现响应式并不是数据发生改变之后DOM立即变化,而是按一定的策略进行DOM更新
示例说明
<div id=app>
<div id="div" v-if="showDiv">我是显示文本</div>
<button @click="showAndGetText">获取内容</button >
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
showDiv : false
},
methods: {
showAndGetText () {
this.showDiv = true
let text = document.getElementById('div').innerHTML
console.log(text)
}
}
}
})
</script>
在该示例中,控制台会抛出一个
innerHTML of null
的错误,这是由于此时页面并未完成渲染,它并没有获取到这个div元素。
在vue中,并不是数据一更新,DOM就立即更新,页面立即渲染,而是当一个事件循环结束后,DOM才会完成更新,页面才会成功渲染;
如通过一个for循环改变一个数据,即使这个for循环100次,DOM也只会在第100次时才更新,而不是循环100次,DOM就更新100次。
在本次示例中,若想成功获取到这个div元素,就需引入今日主角"
nextTick
"
nextTick的定义
- 在下次DOM更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法,即可获取到更新后的DOM。
上一示例结合nextTick使用
- 通过this.$nextTick()调用的代码直接进入下一个tick,相对于下一个tick,当前tick中的DOM已完成更新。
showAndGetText () {
this.showDiv = true
this.$nextTick(()=>{
let text = document.getElementById('div').innerHTML
console.log(text)
})
}
成功显示出这个div元素的文本信息