這篇文章運用簡單易懂的例子給大家介紹什么是Vue2.0生命周期，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)是工信部頒發(fā)資質IDC服務器商，為用戶提供優(yōu)質的雅安機房托管服務

beforeCreate --> created 之間

在這個階段初始化事件，進行數(shù)據(jù)觀測。

created

vue實例創(chuàng)建完后被調用，此時已經(jīng)完成了數(shù)據(jù)觀測(data observer)，屬性和方法的運算，watch/event 事件回調的配置。

可調用methods中的方法，訪問和修改data中的數(shù)據(jù)，并觸發(fā)響應式變化使DOM渲染更新，觸發(fā)watch中相應的方法，computed相關屬性進行重新計算。

一般在created時，進行ajax請求初始化實例數(shù)據(jù)。

此時，vm.$el不可見。

created --> beforeMount 之間

在這個過程中，

a、首先判斷實例中是否有el選項，有的話繼續(xù)向下編譯，沒有的話會停止編譯，直到vm.$mount(el)被調用時才繼續(xù)（el是掛載的DOM節(jié)點）；

b、接下來判斷實例中是否有template，有的話將其作為模板編譯成rander函數(shù)；

c、沒有template的話就，就將 掛載DOM元素的html（即el所對應的DOM元素及其內部的元素）提取出來作為模板編譯；

*注：el所對應的DOM元素不能為body/html元素，因為在后面vue實例掛載時，el所對應的DOM元素及其內部的元素會被模板渲染出來的新的DOM所替換。

　d、如果實例對象中有rander函數(shù)，就直接通過它進行渲染操作。

優(yōu)先級：rander函數(shù) > template > 外部html

此時，rander函數(shù)已經(jīng)準備好并首次被調用。

在這個過程中，$el被初始化為實例中el選項所對應的DOM元素，所以在beforeMount時，用vm.$el獲取到的是掛載DOM元素的html。

beforeMount

beforeMount被調用時，此時$el可見。

beforeMount --> mounted 之間

在這個過程中，el被新創(chuàng)建的vm.$el所替換，并完成實例的掛載。即實例中的el選項被模板渲染創(chuàng)建出來的DOM元素所替換，頁面中的掛載點被渲染出的vue實例代碼段所替換。

Mounted

此時實例已掛載到DOM上，可以通過DOM API獲取實例中DOM節(jié)點。在控制臺打印vm.$el，發(fā)現(xiàn)之前的掛載點及內容已被替換成新的DOM。

下面通過栗子看一下這兩個過程。

    
    
    



    {{message}}

用template/rander選項可以在控制臺清楚的看到：掛載完成后，el被新創(chuàng)建的vm.$el替換。

掛載前是以初始的el和虛擬DOM的形式存在的，此時以template中的內容為模板，模板內容不可見，打印p標簽為null；

掛載后，模板渲染的新DOM替換原來的el，原el所對應的DOM不存在，打印a標簽為null。

beforeUpdate 和 updated

當data對象中數(shù)據(jù)更新時，會觸發(fā) beforeUpdate鉤子，此時view層還沒有更新。 beforeUpdate有下面幾個需要注意的地方：

a、更新的數(shù)據(jù)必須在模板中直接或間接的使用，才會觸發(fā)beforeUpdate；

　b、在掛載之前，data中數(shù)據(jù)更新不會觸發(fā) beforeUpdate！即在created、beforeMount時改變數(shù)據(jù)不會觸發(fā)更新流程；

c、如果在beforeUpdate中，再次修改了該數(shù)據(jù)的值，會再次觸發(fā)beforeUpdate鉤子，進行兩次更新流程。

updated時，view層已更新完畢。

（在上面的代碼中增加兩個鉤子）

mounted: function () {
    this.message = 'first';
//     this.show = false;        // 由于模板中沒有用到show，所以show的改變不會觸發(fā)beforeUpdate
},
beforeUpdate: function () {
    console.group('beforeUpdate 更新前狀態(tài)===============》');
    let elp = document.getElementById('elp').innerHTML;
    console.log('message：' + this.message);
    console.log('DOM：' + elp);
},
updated: function () {
    console.group('updated 更新完成狀態(tài)===============》');
    let elp = document.getElementById('elp').innerHTML;
    console.log('message：' + this.message);
    console.log('DOM：' + elp);
}

這里需要注意一點：view層我們需要通過innerHTML獲取對應元素節(jié)點中的內容，而不能直接獲取元素節(jié)點。直接獲取元素節(jié)點，在控制臺打印出來的view層中的數(shù)據(jù)都是更新之后的狀態(tài)，不能打印出實時的正確的值，這應該和Chrome控制臺的輸出有關。

針對第三條，我們看一下下面的代碼演示：

mounted: function () {
    this.message = 'first';
},
beforeUpdate: function () {
    console.group('beforeUpdate 更新前狀態(tài)===============》');
    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 更新完成狀態(tài)===============》');
    let elp = document.getElementById('elp').innerHTML;
    console.log('message：' + this.message);
    console.log('DOM：' + elp);
}

這里我們可以清楚的看到進行了兩次更新流程，但是對打印的結果有些疑問：第一次將message的值改為first，并且以first來渲染更新DOM，那么第一次調用updated時，message和DOM中的值都應該是first，而此時打印出來的時second。我理解的是，在第一次執(zhí)行updated時，DOM就已經(jīng)完成了第二次渲染更新，具體的過程還需要通過之后對源碼的學習去理解。這里各位有不同的理解或者更詳細的解釋，可以在評論區(qū)留言，共同學習。

在這里，我們可以在beforeUpdate中加定時器去修改message的值，就可以等待第一次數(shù)據(jù)改變，DOM更新渲染完成后，進行第二次數(shù)據(jù)改變。

beforeUpdate: function () {
    console.group('beforeUpdate 更新前狀態(tài)===============》');
    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的值
},

這里可以清楚看到兩次數(shù)據(jù)改變時，數(shù)據(jù)和view層的更新狀態(tài)。

beforeDestroy 和 destroyed

beforeDestroy：實例在銷毀之前調用，此時實例仍然可用。

beforeDestroy -> destroyed： Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。

destroyed：vue實例銷毀后調用。

關于什么是Vue2.0生命周期就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。