<body> <div id="app"> <h3 id="h3">{{msg}}</h3> <input type="button" value="修改msg" @click="msg='No'"> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'ok', }, methods:{ show(){ console.log('執行了show方法') } }, **組件創建期間的4個鈎子函數** 一、第一個生命周期函數，表示實例完全被創建之前，會執行這個函數 在beforeCreate生命周期函數執行的時候，data 和 methods 中的數據還沒有被初始化 beforeCreate() { console.log(this.msg) //undefind this.show() //is not defind }, 二、第二個生命周期函數 在 created 中，data 和 methods 都已經被初始化好了！ 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作 created() { console.log(this.msg) //ok this.show() //執行了show方法 }, 三、第三個生命周期函數，
表示模板已經在內存中編譯完成，但是尚未把模板渲染到頁面中 在beforeMount執行的時候，頁面中的元素沒有被真正替換過來，只是之前寫的一些模板字符串 beforeMount() { console.log(document.getElementById('h3').innerText) //{{msg}} }, 四、第四個生命周期函數，表示內存中的模板已經真實的掛載到頁面中，用戶已經可以看到渲染好的頁面 這個mounted是實例創建期間的最后一個生命周期函數，當執行完 mounted 就表示，實例已經被完 全創建好了，此時，如果沒有其它操作的話，這個實例，就靜靜地在內存中不動 mounted() { console.log(document.getElementById('h3').innerText) //ok }, **組件運行階段的2個鈎子函數** 五、第五個生命周期函數，表示 界面還沒有被更新，但是數據肯定被更新了 得出結論：當執行 beforeUpdate 的時候，頁面中的顯示的數據，還是舊的，此時data 數據是最 新的，頁面尚未和 最新的數據保持同步 beforeUpdate() { console.log('界面上元素的內容'+ document.getElementById('h3').innerText) //沒有執行，因為數據沒改變 console.log('data 中的msg數據是：' + this.msg) }, 六、第六個生命周期函數 updated事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的 updated() { console.log('界面上元素的內容'+ document.getElementById('h3').innerText) //No console.log('data 中的msg數據是：' + this.msg) //No }, **第七個 和 第八個銷毀階段的函數在上面的圖片中** }) </script> </body>
beforeUpdate,可以監聽到data的變化但是view層沒有被重新渲染，view層的數據沒有變化。等到updated的時候 view層才被重新渲染，數據更新。
總結：
1、beforeCreate 此時$el、data 的值都為undefined
2、創建之后，此時可以拿到data的值，但是$el依舊為undefined
3、mount之前，$el的值為“虛擬”的元素節點
4、mount之后，mounted之前，“虛擬”的dom節點被真實的dom節點替換，並將其插入到dom樹中，於是在觸發mounted時，可以獲取到$el為真實的dom元素()
