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元素的文本信息