vue 的生命周期11個鉤子函數(shù)是按照以下的順序來的 ：（不可逆轉(zhuǎn)哦,第11個除外） 
一. 組件創(chuàng)建前后

1.beforeCreate
2.created
    


        

            1
        

        

            2
        

    

如，寫一個子組件，然后掛在到父組件，在子組件中，console.log 子組件中的

data（）{ return { a:1 },
    beforeCreate(){
        console.log(this.a)//undefined },
    created(){
        console.log(this.a)//1 }
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

    

. 
.

二. vue啟動前后

3.beforeMount 4.mounted
    


        

            1
        

        

            2
        

    

這兩個的意思就是， 
vue在beforeMount時，還不管事，也就是說，還沒有渲染數(shù)據(jù)到<div id="app"><div/>里面，此時的這個組件還是空的

當(dāng)mounted時，才會往<div id="app"><div/> 添加?xùn)|西，也就是vue正式 
接管<div id="app"><div/>

可以獲取#app的innerHTML查看差異；

beforeMount(){ console.log(document.getElementById('app').innerHTML)//空的
},
mounted(){ console.log(document.getElementById('app').innerHTML)//#app里的內(nèi)容 }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

. 
.

三. 組件更新前后

5.beforeUpdate 6.updated
    


        

            1
        

        

            2
        

    

這個就不用我多說了吧？當(dāng)子組件里面的 視圖改變 的時候觸發(fā)。 
如，做一個按鈕，讓data里面的a++，假如 一開始a是1 
beforeUpdate返回1 
updated返回2

beforeUpdate(){
    console.log(document.getElementById('a').innerHTML)//1 },
updated(){
    console.log(document.getElementById('a').innerHTML)//2 }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

再點一次 
beforeUpdate返回2 
updated返回3。。。 
. 
.

四. 組件銷毀前后(一般配合v-if使用)

7.beforeDestroy
8.destroyed
    


        

            1
        

        

            2
        

    

給這個子組件用v-if來控制它的銷毀和創(chuàng)建，注意以下：v-show不行。 
子組件銷毀前觸發(fā)beforeDestroy 
子組件銷毀后觸發(fā)destroyed 
第一次會觸發(fā)7.8. 
創(chuàng)建子組件后會觸發(fā)以上的第1.2.3.4.鉤子函數(shù)。

有一個問題，如果我們在子組件里寫一個定時器，然后，子組件被銷毀了，定時器還會執(zhí)行嗎？ 
答案是會的 
所以這時候就會用到了destroyed,在組件被銷毀后，我們把定時器給清除就好了。

所以這兩個鉤子函數(shù)一般用于做性能的優(yōu)化。 
. 
.

五. 組件激活時，未激活時

9.activated
10.deactivated
    


        

            1
        

        

            2
        

    

這兩個鉤子函數(shù)呢一般配合<keep-alive><keep-alive/>來使用。 
通過看 四。這個例子，你肯定知道了一個組件怎么被銷毀和創(chuàng)建。 
但是我們知道通常一個組件是很大的，如果我們總是一直創(chuàng)建、銷毀、創(chuàng)建、銷毀。。。這樣很不合理，而且很浪費性能。。。

這時候我們就可以用<keep-alive><keep-alive/>配合著兩個鉤子函數(shù)來控制組件的激活和不激活。

說一下<keep-alive><keep-alive/>，它就相當(dāng)于把你的組件給緩存下來了，目的呢就是不讓組件重復(fù)的渲染，然后我們通過v-if觸發(fā)，子組件就不會再觸發(fā)7 和 8 了，而是只會頻繁的觸發(fā)9 和 10 
這樣性能會比7 和 8 好的多。 
. 
.

六. 當(dāng)捕獲一個來自子孫組件的錯誤時被調(diào)用

11.errorCaptured
    


        

            1
        

    

當(dāng)子孫組件報錯的時候，父組件會觸發(fā)這個鉤子函數(shù)，并且會返回三個參數(shù)， 
第一個參數(shù)是 錯誤對象 
第二個參數(shù)是 報錯的子孫組件 
第三個參數(shù)是 報錯的子孫組件的具體哪個地方報錯。（如，假如我沒有定義b這個變量，但是我去console.log(b) 這一句肯定會報錯，假如我把這句錯誤代碼寫在了created這個鉤子函數(shù)里，那第三個參數(shù)會返回就是：created hook）

具體第11個沒深入研究，喜歡的可以去看下官網(wǎng)的 errorCaptured。

藍(lán)藍(lán)設(shè)計( www.jjddy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)