vue生命周期鉤子,vue生命周期鉤子,vue生命周期鉤子

說一下vue的生命周期鉤子函數：

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.errorCapture

• 1

當子孫組件報錯的時候，父組件會觸發這個鉤子函數，並且會返回三個參數，

第一個參數是 錯誤對象

第二個參數是 報錯的子孫組件

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

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

好啦，手打不易，給個贊吧。

還是那句話，如果有說的不對的地方，請指教。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！