-
什麼是生命週期：從Vue實例創建、運行、到銷燬期間，總是伴隨着各種各樣的事件，這些事件，統稱爲生命週期！
-
生命週期鉤子：就是生命週期事件的別名而已；
-
生命週期鉤子 = 生命週期函數 = 生命週期事件
-
主要的生命週期函數分類：
-
創建期間的生命週期函數：
-
beforeCreate：實例剛在內存中被創建出來，此時，還沒有初始化好 data 和 methods 屬性
-
created：實例已經在內存中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始 編譯模板
-
beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
-
mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
-
運行期間的生命週期函數：
-
beforeUpdate：狀態更新之前執行此函數， 此時 data 中的狀態值是最新的，但是界面上顯示的 數據還是舊的，因爲此時還沒有開始重新渲染DOM節點
-
updated：實例更新完畢之後調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！
-
銷燬期間的生命週期函數：
-
beforeDestroy：實例銷燬之前調用。在這一步，實例仍然完全可用。
-
destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。
![在這裏插入圖片描述]()
代碼加截圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<input type="button" value="按鈕" @click="msg='no生命週期函數'">
<h3 id="h3">{{msg}}</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'生命週期函數Ok',
},
methods: {
show(){
console.log('執行了show方法');
}
},
beforeCreate() { // 這個是我們遇到的第一個生命週期函數,表示的是實例完全被創建出來之前
// 會執行它
// console.log(this.msg); // undefined
// 注意: 在beforeCreate 生命週期函數執行的時候 data和methods中的數據還沒有都還沒有初始化
},
created() { // 遇到的第二個生命週期函數
console.log(this.msg)
this.show();
// 在created中 data 和 methods 都已經被初始化好了
// 如果要給data賦值或者是調用函數的話, 最早只能在created中操作
},
// 接下來就是Vue開始編輯模板
// 把Vue代碼中的指令執行操作,最終在內存中生成一個編譯好的最終模板字符串
// 然後把這個模板字符串,渲染爲內存中的DOM
// 此時，自是在內存中渲染好了模板。並沒有把模板掛載到真正的頁面中去
beforeMount() { // 第三個生命週期函數，表示 模板以及在內存中編輯完成了，
// 但是尚未把 模板渲染到 頁面中
console.log(document.getElementById('h3').innerHTML);
// 在beforeMount 執行的時候, 頁面中的元素 還沒有真正被替換過來,只是之前寫的一些模板字符串
},
// 這一步 將內存中編譯好的模板 真實的替換到頁面中去
mounted() { // 第三個生命週期函數 表示的就是內存中的模板, 已經真實的掛載到了頁面中
// 用戶可以看到渲染好的頁面了
console.log("mounted函數正在執行"+document.getElementById('h3').innerHTML);
// 注意 ： mounted 是 實例創建期間的最後一個生命週期函數, 當執行完mounted就表示,
// 實例已經被完全創建好了, 此時,如果沒有其他操作的話,這個實例,就靜靜的 躺在內存中
},
// 接下來運行階段的生命週期函數
// beforeUpdate update
// 當數據data改變的時候,那麼兩個函數會觸發0次或者多次
beforeUpdate() { // 這個時候, data數據發生改變的時候,界面並沒有改變
console.log("界面中的數據msg==="+document.getElementById('h3').innerHTML);
console.log("data中的數據msg==="+this.msg);
},
// 接下來就是根據數據data中更新的數據, 在內存中重新的去渲染一份最新的內存DOM樹
// 當最新的內存DOM樹被更新之後,會把最新的內存DOM樹,重新渲染到實際的頁面中去,
// 這個時候 完成了數據從 data（Model層）--->>> view(視圖層)更新、
// 然後執行這個updated函數
updated() {
console.log('updated');
console.log("界面中的數據msg==="+document.getElementById('h3').innerHTML);
console.log("data中的數據msg==="+this.msg);
},
//比如關閉瀏覽器時,就會存在銷燬的過程
// beforeDestroy destroyed
// 當執行beforeDestroy鉤子函數的時候, Vue實例就已經從運行階段 進入了銷燬階段；
// 當執行beforeDestroy鉤子函數的時候,實例身上所有的data和所有的methods以及
// 過濾器 指令..... 都處於可用狀態， 此時還沒有執行真正的銷燬過程
// 當執行到了destroyed函數的時候,組件已經被完全銷燬,此時,組建中的所有的數據 方法 指令
// 過濾期.... 都已經不可用了
});
</script>
</body>
</html>
截圖：
從截圖上面能夠看出來，代碼塊也註釋了這個Vue實例生命週期的過程!也比較好理解。
記下來,下次就忘記了,再來看看！
這篇博客寫的也不錯