vue的聲明週期的鉤子函數

vue的聲明周期函數有11個按照如下順序來的

一. 組件建立先後

1.beforeCreate
2.created

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

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

　　

. 二。vue啓動先後

3.beforeMount 4.mounted

這兩個的意思就是， 
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裏的內容
}

　　

三. 組件更新先後

當子組件裏面的  的時候觸發。 
如，作一個按鈕，讓裏面的++，假如 一開始a是1 
返回1 
返回25.beforeUpdate 6.updated視圖改變dataabeforeUpdateupdated

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

　　

四. 組件銷燬先後(通常配合v-if使用)

7.beforeDestroy
8.destroyed

給這個子組件用v-if來控制它的銷燬和建立，注意如下：v-show不行。
子組件銷燬前觸發beforeDestroy
子組件銷燬後觸發destroyed
第一次會觸發7.8.
建立子組件後會觸發以上的第1.2.3.4.鉤子函數。

有一個問題，若是咱們在子組件裏寫一個定時器，而後，子組件被銷燬了，定時器還會執行嗎？
答案是會的
因此這時候就會用到了destroyed,在組件被銷燬後，咱們把定時器給清除就行了。

因此這兩個鉤子函數通常用於作性能的優化。

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

9.activated
10.deactivated

這兩個鉤子函數呢通常配合<keep-alive><keep-alive/>來使用。
經過看 四。這個例子，你確定知道了一個組件怎麼被銷燬和建立。
可是咱們知道一般一個組件是很大的，若是咱們老是一直建立、銷燬、建立、銷燬。。。這樣很不合理，並且很浪費性能。。。

這時候咱們就能夠用<keep-alive><keep-alive/>配合着兩個鉤子函數來控制組件的激活和不激活。

說一下<keep-alive><keep-alive/>，它就至關於把你的組件給緩存下來了，目的呢就是不讓組件重複的渲染，而後咱們經過v-if觸發，子組件就不會再觸發7 和 8 了，而是隻會頻繁的觸發9 和 10
這樣性能會比beforeDestroy 和 destroyed 好的多。
.

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

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

具體第11個沒深刻研究，喜歡的能夠去看下官網的 errorCapture。

原文來自：https://blog.csdn.net/heshuaicsdn/article/details/81043647