<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 }, **第七個 和 第八個銷毀階**
beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。（可在此處清除定時器，清除事件綁定）
destroyed：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會 }) </script> </body>
