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

1.beforeCreate
2.created
    


        

            1
        

        

            2
        

    

如，寫一個(gè)子組件，然后掛在到父組件，在子組件中，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啟動(dòng)前后

3.beforeMount 4.mounted
    


        

            1
        

        

            2
        

    

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

當(dāng)mounted時(shí)，才會(huì)往<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
        

    

這個(gè)就不用我多說了吧？當(dāng)子組件里面的 視圖改變 的時(shí)候觸發(fā)。 
如，做一個(gè)按鈕，讓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
        

    

再點(diǎn)一次 
beforeUpdate返回2 
updated返回3。。。 
. 
.

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

7.beforeDestroy
8.destroyed
    


        

            1
        

        

            2
        

    

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

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

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

五. 組件激活時(shí)，未激活時(shí)

9.activated
10.deactivated
    


        

            1
        

        

            2
        

    

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

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

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

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

11.errorCaptured
    


        

            1
        

    

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

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

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