生命週期圖
代碼
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<p id="h3">{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '歡迎學習Vue',
},
methods: {
},
beforeCreate(){
// 第一個生命週期函數，表示實例完全被創建出來之前，會執行它
// console.log(this.msg)
// 在 beforeCreate 生命週期函數執行的時候，data 和 methods 中的數據都還沒有被初始化
},
created(){
// 這是遇到的第二個生命週期函數
console.log(this.msg)
// 在 created 中，data和methods都已經被初始化好了
// 如果要調用 methods 中的方法，或者操作 data 中的數據，最早只能在created中操作
},
// 這裏表示 Vue 開始編輯模板，把 Vue 代碼中的那些指令進行執行，最終，在內存中生成一個編譯好的最終模板字符串，
// 然後，把這個模板字符串渲染爲內存中的DOM，此時只是在內存中，渲染好了模板並沒有把模板掛載到真正的頁面中去
beforeMount(){
// 第三個生命週期函數，表示模板已經在內存中編輯完成了，但是尚未把模板渲染到頁面中
console.log(document.getElementById('h3').innerText)
// 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串
// 此函數執行的時候，模板已經在內存中編譯好了，但是尚未掛載到頁面中去，此時，頁面還是舊的
},
// 將內存中編譯好的模板，真實的替換到瀏覽器頁面中去
mounted(){
// 第四個生命週期函數，表示內存中的模板，已經真實的掛載到了頁面中去，用戶已經可以看到渲染好的頁面了
console.log(document.getElementById('h3').innerText)
// mounted 是 實例創建期間的最後一個生命週期函數，當執行完 mounted 就表示，實例就已經被完全創建好了，
// 此時如果沒有其他操作的話，這個實例就靜靜的躺在內存中一動不動
},
// 接下來的是運行中的兩個事件
beforeUpdate(){
// 這時候表示我們的界面還沒有被更新【數據被更新了嗎？數據被更新了】
console.log('界面上元素的內容是：' + document.getElementById('h3').innerText)
console.log('data中的msg數據是：' + this.msg)
// 當執行 beforeUpdate 的時候，頁面中顯示的數據還是舊的，此時 data 數據是最近的，頁面尚未和最新的數據保持同步
},
updated(){
console.log('界面上元素的內容是：' + document.getElementById('h3').innerText)
console.log('data中的msg數據是：' + this.msg)
// updated 事件執行的時候，頁面和data數據已經保持同步了，都是最新的
}
// 當執行beforeDestroy鉤子函數的時候，Vue實例已經從運行階段，進入到銷燬階段；此時實力身上所有的 data 和所有的 methods，以及過濾器，指令。。。都處於可用狀態，還沒有真正執行銷燬的過程
// 當執行 destoryed 函數的時候，組件已經完全銷燬了，此時組件中的屬性、方法、指令、過濾器。。。都已經不可用了
})
</script>
</body>
beforeCreate()：第一個生命週期函數，表示實例完全被創建出來之前會執行它，在beforeCreate生命週期函數執行的時候，data和methods中的數據都還沒有被初始化created()：第二個生命週期函數，在created中，data和methods都已經被初始化好了，如果要調用methods中的方法，或者操作data中的數據，最早只能在created中操作。beforeMount()：第三個生命週期函數，表示模板已經在內存中編輯完成了，但是尚未把模板渲染到頁面中，此函數執行的時候，模板已經在內存中編譯好了，但是尚未掛載到頁面中去，此時頁面還是舊的mounted()：第四個生命週期函數，表示內存中的模板，已經真實的掛載到了頁面中去，用戶已經可以看到渲染好的頁面了，mounted是 實例創建期間的最後一個生命週期函數，當執行完mounted就表示，實例就已經被完全創建好了，此時如果沒有其他操作的話，這個實例就靜靜的躺在內存中一動不動beforeUpdate()：當執行beforeUpdate的時候，頁面中顯示的數據還是舊的，此時 data 數據是最新的，頁面尚未和最新的數據保持同步updated()：updated事件執行的時候，頁面和data數據已經保持同步了，都是最新的beforeDestroy()：當執行beforeDestroy鉤子函數的時候，Vue實例已經從運行階段，進入到銷燬階段；此時實力身上所有的 data 和所有的methods，以及過濾器，指令。。。都處於可用狀態，還沒有真正執行銷燬的過程destoryed()：當執行destoryed函數的時候，組件已經完全銷燬了，此時組件中的屬性、方法、指令、過濾器。。。都已經不可用了