網上已經有很多關于vue生命周期的文章，我的這篇文章的由來，其實是我對官網上描述的一句話的思考與了解：“el被新建立的vm.$el替換”，是以文章更多的内容可能是在對vue生命周期中“created -> beforeMount -> mounted” 過程的了解。
beforeCreate --> created 之間
在這個階段初始化事件，進行資料觀測。
created
vue執行個體建立完後被調用，此時已經完成了資料觀測(data observer)，屬性和方法的運算，watch/event 事件回調的配置。
可調用methods中的方法，通路和修改data中的資料，并觸發響應式變化使DOM渲染更新，觸發watch中相應的方法，computed相關屬性進行重新計算。
一般在created時，進行ajax請求初始化執行個體資料。
此時，vm.$el不可見。
created --> beforeMount 之間
在這個過程中，
a、首先判斷執行個體中是否有el選項，有的話繼續向下編譯，沒有的話會停止編譯，直到vm.$mount(el)被調用時才繼續（el是挂載的DOM節點）；
b、接下來判斷執行個體中是否有template，有的話将其作為模闆編譯成rander函數；
c、沒有template的話就，就将 挂載DOM元素的html（即el所對應的DOM元素及其内部的元素）提取出來作為模闆編譯；
*注：el所對應的DOM元素不能為body/html元素，因為在後面vue執行個體挂載時，el所對應的DOM元素及其内部的元素會被模闆渲染出來的新的DOM所替換。
d、如果執行個體對象中有rander函數，就直接通過它進行渲染操作。
優先級：rander函數 > template > 外部html
此時，rander函數已經準備好并首次被調用。
在這個過程中，$el被初始化為執行個體中el選項所對應的DOM元素，是以在beforeMount時，用vm.$el擷取到的是挂載DOM元素的html。
beforeMount
beforeMount被調用時，此時$el可見。
beforeMount --> mounted 之間
在這個過程中，el被新建立的vm.$el所替換，并完成執行個體的挂載。即執行個體中的el選項被模闆渲染建立出來的DOM元素所替換，頁面中的挂載點被渲染出的vue執行個體代碼段所替換。
Mounted
此時執行個體已挂載到DOM上，可以通過DOM API擷取執行個體中DOM節點。在控制台列印vm.$el，發現之前的挂載點及内容已被替換成新的DOM。
下面通過栗子看一下這兩個過程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
</head>
<body>
<div id="app">
<a id='ela' href="">{{message}}</a>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
message: 'hello'
};
},
template: '<p id="elp">{{message}}</p>',
beforeMount: function () {
console.group('beforeMount 挂載前狀态===============》');
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
let a = document.getElementById('ela');
let p = document.getElementById('elp');
console.log(this.$el);
console.log(state);
console.log(a); // <a id='ela' href="">{{message}}</a>
console.log(p); // null
},
mounted: function () {
console.group('mounted 挂載結束狀态===============》');
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
let a = document.getElementById('ela');
let p = document.getElementById('elp');
console.log(this.$el);
console.log(state);
console.log(a); // null
console.log(p); // <p id="elp">father</p>
}
</script>
</html> 
用template/rander選項可以在控制台清楚的看到：挂載完成後，el被新建立的vm.$el替換。
挂載前是以初始的el和虛拟DOM的形式存在的，此時以template中的内容為模闆，模闆内容不可見，列印p标簽為null；
挂載後，模闆渲染的新DOM替換原來的el，原el所對應的DOM不存在，列印a标簽為null。
beforeUpdate 和 updated
當data對象中資料更新時，會觸發 beforeUpdate鈎子，此時view層還沒有更新。 beforeUpdate有下面幾個需要注意的地方：
a、更新的資料必須在模闆中直接或間接的使用，才會觸發beforeUpdate；
b、在挂載之前，data中資料更新不會觸發 beforeUpdate！即在created、beforeMount時改變資料不會觸發更新流程；
c、如果在beforeUpdate中，再次修改了該資料的值，會再次觸發beforeUpdate鈎子，進行兩次更新流程。
updated時，view層已更新完畢。
（在上面的代碼中增加兩個鈎子）
mounted: function () {
this.message = 'first';
// this.show = false; // 由于模闆中沒有用到show，是以show的改變不會觸發beforeUpdate
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀态===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
},
updated: function () {
console.group('updated 更新完成狀态===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
} 這裡需要注意一點：view層我們需要通過innerHTML擷取對應元素節點中的内容，而不能直接擷取元素節點。直接擷取元素節點，在控制台列印出來的view層中的資料都是更新之後的狀态，不能列印出實時的正确的值，這應該和Chrome控制台的輸出有關。
針對第三條，我們看一下下面的代碼示範：
mounted: function () {
this.message = 'first';
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀态===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
this.message = 'second'; // 此時在beforeUpdate中再次修改了message的值
},
updated: function () {
console.group('updated 更新完成狀态===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
} 這裡我們可以清楚的看到進行了兩次更新流程，但是對列印的結果有些疑問：第一次将message的值改為first，并且以first來渲染更新DOM，那麼第一次調用updated時，message和DOM中的值都應該是first，而此時列印出來的時second。我了解的是，在第一次執行updated時，DOM就已經完成了第二次渲染更新，具體的過程還需要通過之後對源碼的學習去了解。這裡各位有不同的了解或者更詳細的解釋，可以在評論區留言，共同學習。
在這裡，我們可以在beforeUpdate中加定時器去修改message的值，就可以等待第一次資料改變，DOM更新渲染完成後，進行第二次資料改變。
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀态===============》');
let elp = document.getElementById('elp').innerHTML;
console.log('message：' + this.message);
console.log('DOM：' + elp);
var that = this;
setTimeout(function(){
that.message = 'second';
});
// this.message = 'second'; // 此時在beforeUpdate中再次修改了message的值
}, 這裡可以清楚看到兩次資料改變時，資料和view層的更新狀态。
beforeDestroy 和 destroyed
beforeDestroy：執行個體在銷毀之前調用，此時執行個體仍然可用。
beforeDestroy -> destroyed： Vue 執行個體訓示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子執行個體也會被銷毀。
destroyed：vue執行個體銷毀後調用。
結尾：關于vue生命周期就總結完畢，有錯誤的地方煩請指出，會及時修改！