首先讓我們來看一下經典的vue生命周期示意圖：
針對上圖生命周期序號下表進行解釋：
1.new vue() : 這是new了一個vue的實例對象；此時就會進入組件的創建過程。
2.Init Events & Lifecycle ：初始化組件的事件和生命周期函數；當執行完這一步之后，組件的生命周期函數就已經全部初始化好了，等待着依次去調用。
3.beforeCreate ：
官方說明：在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。
解釋：這是第一個生命周期函數；此時，組件的data和methods以及頁面DOM結構，都還沒有初始化；所以此階段，什么都做不了。
4.Init injections & reactivity ：這個階段中，正在初始化data和methods中的數據以及方法。
5.created ：
官方說明：實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
解釋：這個組件創建階段第二個生命周期函數，此時，組件的data和methods已經可以用了；但是頁面還沒有渲染出來；在這個生命周期函數中，我們經常會發起Ajax請求；
6.正在解析模板結構，把data上的數據拿到，並且解析執行模板結構匯總的指令；當所有指令被解析完畢，那么模板頁面就被渲染到內存中了；當模板編譯完成，我們的模板頁面，還沒有掛載到頁面上，只是存在於內存中，用戶看不到頁面；
7.beforeMount :
官方說明：在掛載開始之前被調用：相關的 render 函數首次被調用。
解釋：當模板在內存中編譯完成，會立即執行實例創建階段的第三個生命周期函數，這個函數就是beforeMount，此時內存中的模板結構，還沒有真正渲染到頁面上；此時，頁面上看不到真實的數據，用戶看到的只是一個模板頁面而已；
8.這一步把正在內存中渲染好的模板結構替換到頁面上；
9.mounted ：
官方說明：el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
解釋：mounted是組件創建階段最后的一個生命周期函數；此時，頁面已經真正的渲染好了，用戶可以看到真實的頁面數據了；當這個生命周期函數執行完，組件就離開了創建階段，進入到了運行中的階段；如果大家使用到一些第三方的UI插件，而且這個插件還需要被初始化，那么，必須在mounted中來初始化插件；
10.組件運行匯總的生命周期函數；組件運行中的生命周期函數，會根據data數據的變化，有選擇性的被觸發0次貨N次；
11.beforeUpdate ：
官方說明：數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程。
解釋：在執行beforeUpdate運行中的生命周期函數的時候，數據肯定是最新的；但是頁面上呈現的數據還是舊的
12.正在根據最新的data數據，重新渲染內存中的的模板結構；並把渲染好的模板結構替換到頁面上
13.updated ：
官方說明：由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。
解釋：頁面也完成了更新，此時，data數據是最新的，同時，頁面上呈現的數據也只最新的。
14.beforeDestroy ：
官方說明：實例銷毀之前調用。在這一步，實例仍然完全可用。
解釋：當執行beforeDestroy的時候，組件即將被銷毀，但是還沒有真正開始銷毀，此時組件還是正常可用的；data、methods等數據或方法，依舊可以被正常訪問
15.銷毀過程
16.destroyed ：
官方說明：vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
解釋：組件已完成了銷毀，組件無法使用，data和methods都不可使用。
為了更方便的理解上述的解釋，我們使用此代碼來查看每個具體的過程，並且進行打印：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message"/>
<p>{{message}}</p>
<button @click="clickfun">按鈕</button>
</div>
</body>
<script>
var myVue = new Vue({
el: '#app',
data: function () {
return {
message: 'XXXX'
};
},
beforeCreate: function () {
console.group('beforeCreate 創建前狀態===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state);
},
created: function () {
console.group('created 創建完畢狀態===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state);
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
mounted: function () {
console.group('mounted 掛載結束狀態===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML);
},
updated: function () {
console.group('updated 更新完成狀態===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
console.log('updated == ' + document.getElementsByTagName('p')[0].innerHTML);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
methods: {
clickfun() {
myVue.$destroy()
}
}
});
</script>
</html>
查看打印結果：
1.created和mounted
2.updated
3.destroyed
