vue中的$nextTick 解决DOM没有更新完成问题

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);
                }
            }
        })

点击按钮时发现后台会抛出错误：Cannot read property 'innerHTML' of null ，意思就是找不到div元素，这里就涉及vue一个重要概念：异步更新队列。

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的内容了。