$nextTick 具体使用场景

$nextTick的定义

$nextTick是vue框架里面一个全局api。它是当前异步更新队列循环结束之后的回调函数，

它会在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

$nextTick的使用场景

有个div，用 v-if 将它隐藏，点击按钮后，改变 v-if 为 true，让它显示，同时拿到这个div的文本内容。

<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').innnerHTML;
             console.log(text);
        }
    }
})
</script>

上代码运行后在控制台会抛出一个错误：Cannot read property 'innnerHTML of null，意思是获取不到div元素。原因是还没有创建div但需要获取这个div导致的，具体需要了解事件循环机制（这边就偏题了）

了解原因后可以将上述代码修改如下：

<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;
            this.$nextTick(()=>{
                  var text = document.getElementById('div').innnerHTML;
                 console.log(text);  
            });
        }
    }
})
</script>

这时再点击事件，控制台就打印出div的内容“这是一段文本“了。