Vue中父子組件生命週期執行順序初探

現在前端框架都流行組件化，頁面元素均可以使用組件進行高度歸納，那麼處理組件之間的關係就如同處理頁面架構同樣重要。正確理解組件之間的關係，才能讓代碼按照咱們與預料方式工做。最近參與了一個Vue.js的項目，在處理父子嵌套組件之間關係時遇到了較大的阻力，雖然問題最後解決了，可是以花費大量時間爲代價的，記錄在這裏，但願下次不踩一樣的坑，能更高效的處理此類問題。

0 問題描述

同react，vue組件也有一套完整的生命週期，不一樣階段有不一樣的分工。整體來說常常會用的生命週期鉤子有如下幾種：

• created
• mounted
• destroy

一般會在這些鉤子中處理一些異步請求，最多見的就是發起網絡請求調用api獲取數據。

這裏有個問題：在單一組件中，鉤子的執行順序是created -> mounted -> destroyed，但當父子組件嵌套時，父組件和子組件各擁有各自獨立的鉤子函數，這些父子組件的這些鉤子是如何交融執行，且執行順序又是怎樣的呢?

最近開發中遇到的一個「詭異」的問題，就是因爲對父子組件生命週期鉤子執行順序理解不透徹引發的。問題是這樣的：有一個組件有由一系列子組件組成，子組件又被分解成組件，這樣下來就構成了三級組件。需求是在組件顯示在頁面上以後，再將數據初始化進行回顯。父組件獲取數據後傳遞到子組件，要求子組件根據這個值將內部元數據進行過濾和加工。那麼在子組件中什麼時機下才能獲取父組件傳遞過來的新值呢？。

個人作法是這樣的：最高層父組件的mounted中發起請求獲取數據，經過vue的響應機制以props的形式傳遞到子組件，在子組件的mounted中拿到對應的props進行處理。這樣作法要求父組件的mounted時機先於子組件的mounted,但事實是這樣嗎？顯然不是。

這樣致使的問題就是，數據沒法正確的回顯。

1 探究

探究的方法是：寫一個有父子嵌套關係的組件，分別在他們的鉤子函數中打印日誌，觀察執行順序。獲得的結果如圖所示，父組件先建立，而後子組件建立；子組件先掛載，而後父組件掛載。

子組件掛載完成後，父組件還未掛載。因此組件數據回顯的時候，在父組件mounted中獲取api的數據，子組件的mounted是拿不到的。

仔細看看父子組件生命週期鉤子的執行順序，會發現created這個鉤子是按照從外內順序執行，因此回顯場景的解決方案是：在created中發起請求獲取數據，依次在子組件的created中會接收到這個數據。

2 結論

Vue父子組件生命週期鉤子的執行順序遵循：從外到內，而後再從內到外，無論嵌套幾層深，也遵循這個規律。

組件化的設計思路大抵相同，React中父子組件生命週期鉤子執行順序，具體沒作探究，可是值得一提的是react父組件的componentDidMount也是晚於子組件componentDidMount執行的。

3 其餘

關於回顯，問題在於如何在子組件中知道遠程數據回來了，而且經過對遠程數據的加工處理，最終造成正確的回顯。處理按照鉤子的順序獲取數據，在vue中還有一個特性watch，是否能夠經過watch屬性的方式來更新回顯呢？這種方法有待於探究。