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裡的內容
}

三. 元件更新前後

5.beforeUpdate
6.updated

當子元件裡面的 檢視改變 的時候觸發。 
如，做一個按鈕，讓data裡面的a++，假如 一開始a是1 
beforeUpdate返回1 
updated返回2

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