使用Vue有一段時(shí)間了，也經(jīng)歷了幾個(gè)項(xiàng)目的實(shí)戰(zhàn)，但發(fā)現(xiàn)自己對(duì)Vue的理解還是不夠深刻，很多時(shí)候偶然看到Vue文章才發(fā)現(xiàn)原來Vue還可以這么玩。所以決定重新觀看Vue的文檔深入理解，并寫下一些筆記以供記憶。

個(gè)人覺得使用Vue之前，需要了解整個(gè)Vue的生命周期，清楚的認(rèn)識(shí)到Vue在每個(gè)階段的鉤子函數(shù)，這樣才可以更好讓我們?nèi)ナ褂肰ue。

綜述

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如，實(shí)例需要配置數(shù)據(jù)觀測(cè)(data observer)、編譯模版、掛載實(shí)例到 DOM ，然后在數(shù)據(jù)變化時(shí)更新 DOM 。在這個(gè)過程中，實(shí)例也會(huì)調(diào)用一些生命周期鉤子 ，這就給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。

淺顯的來說，生命周期的鉤子函數(shù)就是回調(diào)函數(shù)，在不同的階段有不同的回調(diào)函數(shù)供用戶處理自定義的事件。

Vue官方文檔-生命周期

生命周期圖例

從我的理解來說，Vue的生命周期主要可以分為四大部分，實(shí)例化（created），掛載/渲染（mounted），更新（updated），銷毀（destroyed），這也是平時(shí)使用最多的鉤子函數(shù)。

下面是完整的Vue生命周期圖例。

Vue生命周期

實(shí)例化

beforeCreate

組件實(shí)例剛被創(chuàng)建，還沒有計(jì)算組件屬性，無(wú)法訪問data值；一般在此階段可以加載個(gè)一個(gè)loading事件。

此時(shí)訪問data和$el都是undefined

created

組件已經(jīng)綁定屬性，但仍未渲染模板。就是說在created的鉤子函數(shù)中，你可以處理data的數(shù)據(jù)，但是無(wú)法訪問$el，此時(shí)$el的值為“虛擬”的元素節(jié)點(diǎn)，也就是在此階段，你無(wú)法進(jìn)行Dom的操作。如果你需要在created的時(shí)候進(jìn)行Dom的處理，請(qǐng)務(wù)必在Vue.nextTick()函數(shù)中操作。

在這個(gè)階段，一般做一些初始化操作，初始化一些自執(zhí)行函數(shù)。

掛載/渲染

beforeMount

組件模板掛載/渲染之前的鉤子函數(shù)，此階段已經(jīng)完成了$el和data初始化，但未掛載組件

mounted

在此階段，組件已經(jīng)編譯完成并進(jìn)行渲染，可以訪問$el并進(jìn)行Dom操作，但是需要注意一點(diǎn)的是，這里并不能保證組件已經(jīng)存在document中。此階段相當(dāng)于在created中使用Vue.nextTick()。

此階段一般執(zhí)行數(shù)據(jù)請(qǐng)求，從后端獲取數(shù)據(jù)。

更新

beforeUpdate

顧名思義，這個(gè)是在數(shù)據(jù)更新之前的鉤子函數(shù)，可以處理數(shù)據(jù)保存之類的事件。

updated

這是在數(shù)據(jù)更新后的鉤子函數(shù)，在此階段，數(shù)據(jù)已完成更新,與數(shù)據(jù)綁定的Dom也已經(jīng)渲染完成。

銷毀

beforeDestoroy

組件銷毀之前的鉤子函數(shù)，一般在此階段執(zhí)行數(shù)據(jù)銷毀的函數(shù)

destroyed

組件已經(jīng)銷毀，無(wú)法訪問組件的任何信息。

栗子

var app = new Vue({
    el: '#app',
    data: {
    },
    beforeCreate(){
        <!--無(wú)法訪問data屬性和$el-->
    },
    created(){
        <!--已綁定data屬性，但無(wú)法訪問$el-->
    },
    beforeMount() {
        <!--可以訪問$el,但組件未渲染-->
    },
    mounted() {
        <!--已完成組件渲染，可正常操作-->
    },
    beforeUpdate() {
        <!--數(shù)據(jù)更新前的鉤子函數(shù)-->
    },
    updated() {
        <!--數(shù)據(jù)已更新，相關(guān)dom已重新渲染-->
    },
    beforeDestroy() {
        <!--銷毀組件前的鉤子函數(shù)-->
    },
    destroyed() {
        <!--組件已銷毀-->
    }
})

原文鏈接-瘋子的博客