使用vue时报错 Cannot read property xxxx ----对Vue中$nextTick的理解和应用(异步更新队列机制)

设想一个场景,使用v-if实现div的隐藏和显示,并且在显示时获取div里面的内容,div默认不显示,代码如下:

html:

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

js:

     var app = new Vue({
            el: "#app",
            data: {
                showDemo: false
            },
            methods: {
                getText: function () {
                    this.showDemo = true;
                    var txt = document.getElementById('demo').innerHTML;
                    console.log(txt)
                }
            }
        })

这段代码在运行时会在控制台上抛出一个错误,Cannot read property 'innerHTML' of null.意思是获取不到div元素,这是就涉及到Vue的一个重要概念:异步更新队列