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

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時，還不管事，也就是說，還沒有渲染數據到<div id="app"><div/>里面，此時的這個組件還是空的

當mounted時，才會往<div id="app"><div/> 添加東西，也就是vue正式 
接管<div id="app"><div/>

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

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


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

. 
.

三. 組件更新前后

5.beforeUpdate 6.updated
    


        

            1
        

        

            2
        

    

這個就不用我多說了吧？當子組件里面的 視圖改變 的時候觸發。 
如，做一個按鈕，讓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來控制它的銷毀和創建，注意以下：v-show不行。 
子組件銷毀前觸發beforeDestroy 
子組件銷毀后觸發destroyed 
第一次會觸發7.8. 
創建子組件后會觸發以上的第1.2.3.4.鉤子函數。

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

所以這兩個鉤子函數一般用于做性能的優化。 
. 
.

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

9.activated
10.deactivated
    


        

            1
        

        

            2
        

    

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

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

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

六. 當捕獲一個來自子孫組件的錯誤時被調用

11.errorCaptured
    


        

            1
        

    

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

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

藍藍設計( m.dzxscac.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務