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裡的內容 }
三. 元件更新前後
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