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。
好啦,手打不易,給個贊吧。
還是那句話,如果有說的不對的地方,請指教。
※程序員該用哪種姿勢來理財
※LoadRunner回放腳本常見問題及解決方法
TAG:程序員小新人學習 |