<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>