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

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

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

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

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

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