vue生命周期

image

總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。

• 創(chuàng)建前/后： 在beforeCreated階段，vue實(shí)例的掛載元素$el和數(shù)據(jù)對(duì)象Data都為undefined，還未初始化。created階段，vue實(shí)例的數(shù)據(jù)對(duì)象data有了,el還沒(méi)有

• 載入前/后：在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。在mounted階段，vue實(shí)例掛載完成，data.message成功渲染。

• 更新前/后：當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法。

• 銷毀前/后：在執(zhí)行destroy方法后，對(duì)data的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和dom的綁定，但是dom結(jié)構(gòu)依然存在。

activated: keep-alive組件激活時(shí)調(diào)用

deactivated: keep-alive組件銷毀時(shí)調(diào)用

errorCaptured: 當(dāng)捕獲一個(gè)來(lái)自子孫組件的錯(cuò)誤時(shí)被調(diào)用

<keep-alive></keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例,主要用于保留組件狀態(tài)或避免重新渲染。

父子組件生命周期執(zhí)行順序

創(chuàng)建與掛載

父beforeCreate > 父created > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > 父mounted

更新

父beforeUpdate > 子beforeUpdate > 子updated > 父updated

銷毀

父beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed

父子組件及mixin的生命周期執(zhí)行順序

mixin的生命周期鉤子在組件的生命周期鉤子之前執(zhí)行

在父組件中引入了mixin，生命周期順序如下：

mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的befo

作者：一條小魯班
鏈接：http://m.itdecent.cn/p/f0b7950b3ab0
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。