vue的异步更新队列 $nextTick

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

       var vm = new Vue({
           el: '#box',
           data: {
               showDiv:false,
           },
           methods:{
               getText(){
                   this.showDiv = true;
                   let txt = document.getElementById("div").innerHTML;
                   console.log(txt);
               }
           }
       });
   </script>

代码运行时会抛出  Cannot read property 'innerHTML' of null 的错误，当vue观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓存在同一事件中循环发生的所有数据变化，并在缓存时去掉重复的数据变化。然后在下一个循环事件tick中Vue刷新队列并执行对应工作（去重后）。如果你用for循环来动态改变数据100次，那么它只会应用100次的最后一次。

报错的原因时 当data中的this.showDiv被改变时 id为div的div还没有被创建出来，直到下一次事件循环时才会被创建

Vue的生命周期时 beforeCreate (组件实例刚被创建 如 data，methods。。。被创建)--> created（data等组件创建完成，属性已绑定  DOM还没有被创建） ,-->beforeMounte(模板编译，挂载之前)--->mounted(模板编译，挂在之后)

解决方法

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

var vm = new Vue({
el: '#box',
data: {
showDiv:false,
},
methods:{
getText(){
this.showDiv = true;
this.$nextTick(function(){

let txt = document.getElementById("div").innerHTML;
console.log(txt);

})
}
}
});
</script>