1. 程式人生 > >Vue中父子組件執行的先後順序探討

Vue中父子組件執行的先後順序探討

src 先後 img image 組件 red 每一個 remount mage

  前幾天,朋友向我提出了一個關於Vue中父子組件執行的先後順序問題,相信很多朋友在學習的過程中也會遇到這個問題,所以我就在此提出我自己的一些小看法。

  問題如下:請問下圖中父子組件執行的先後順序?

技術分享圖片

  首先,我想先談一談vue的生命周期。我個人認為,從一個實例對象被創建到實例對象被銷毀的過程就是該對象的生命周期。那麽到底這個生命周期分為哪幾個部分呢?依次為:beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestory -> destoryed。該過程是嚴格按照先後順序來執行的,在每一個生命周期階段內,我們都會相應的做一些事情,具體哪個環節可以執行什麽操作這個我準備放到後續的文章中進行分析,今天我們主要來探討一下,上圖中父組件與子組件的執行先後順序。

  Vue中,專註於組件式開發,我認為一個組件可以是一個小小的功能模塊,也可以是某一個完整的頁面,至於具體是什麽,這就取決你的需求。那麽在開發過程中,父子組件的嵌套、父子組件執行的先後順序肯定是不可避免的。總結歸納之後,得出以下結論:在組件開始生成到結束生成的過程中,如果該組件還包含子組件,則自己開始生成後,要讓所有的子組件也開始生成,然後自己就等著,直到所有的子組件生成完畢,自己再結束。所以上圖中。“父親”先開始自己的created,然後“兒子”開始自己的created和mounted,最後“父親”再執行自己的mounted。

  

Vue中父子組件執行的先後順序探討