理解vue的重要机制：异步更新队列

 <div id="app">
        <div id="div" v-if="showDiv">这是一段文本</div>
        <button @click="getText">获取当前div内容</button>     
    </div>


    <script type="text/javascript">
        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,意思是获取不到div元素，这句是“异步更新队列”

Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列，并缓冲到同一个事件循环中发生的所有数据变化。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一事件循环tick中，Vue刷新队列并执行实际（已去重的数据）工作。所以如果你用一个for循环来动态改变数据100次，其实它只会应用最后一改变，如果没有这个机制，DOM就会被重绘100次，这固然是很大的开销。

所以上面之所以报错，在执行this.showDiv=true时，div仍然还没有被创建出来，直到下一个Vue事件循环，才开始创建，而$nextTick就是用来什么时候DOM更新完成

getText:function(){
                    this.showDiv = true;
                    this.$nextTick(function(){
                        var text = document.getElementById('div').innerHTML;
                        console.log(text)
                    })  
                }