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>