如今前端框架都流行組件化，頁面元素都可以使用組件進行高度概括，那么處理組件之間的關系就如同處理頁面架構一樣重要。正確理解組件之間的關系，才能讓代碼按照我們與預料方式工作。最近參與了一個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屬性的方式來更新回顯呢？這種方法有待於探究。