vue中的nextTick

​ 今天在浏览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元素的文本信息

上一篇:VUE实现消息更新自动滚动到页面最底部


下一篇:vue 滚动条到最底部