Vue父子組件生命周期調(diào)用順序

一、順序
1.加載渲染過(guò)程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
2.子組件更新過(guò)程
父beforeUpdate->子beforeUpdate->子updated->父updated
3.父組件更新過(guò)程
父beforeUpdate->父updated
4.銷毀過(guò)程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
二、理解
組件的調(diào)用順序都是先父后子,渲染完成的順序肯定是先子后父
組件的銷毀操作是先父后子,銷毀完成的順序是先子后父
三、原理
當(dāng)dom渲染時(shí),會(huì)createElm創(chuàng)建元素,創(chuàng)建元素后會(huì)進(jìn)行初始化,初始化組件的時(shí)候內(nèi)部還有組件,會(huì)不停的去渲染,所以它的渲染順序是先父后子,完成的順序是先子后父。

dom渲染描述:先父組件要?jiǎng)?chuàng)建beforeCreate、created,父組件實(shí)例化完成后要掛載這個(gè)父組件beforeMount,掛載父組件的時(shí)候會(huì)調(diào)用父的render方法,渲染的時(shí)候發(fā)現(xiàn)里面有子組件,這時(shí)就會(huì)調(diào)用子組件的beforeCreate、created、beforeMount,當(dāng)子組件都完成之后,會(huì)把子組件先存起來(lái),這兒有隊(duì)列,不是子完成就會(huì)調(diào)用子的mounted,因?yàn)樽咏M件中可能還有子組件,這時(shí)會(huì)暫存一下,到最后子全完成了會(huì)按照子調(diào)父的調(diào),mounted是先子后父。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容