網上已經有很多關于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生命周期就總結完畢，有錯誤的地方煩請指出，會及時修改！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
