国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Yumenokanata / 3232人閱讀

摘要：結論父子組件生命周期鉤子的執行順序遵循從外到內，然后再從內到外，不管嵌套幾層深，也遵循這個規律。組件化的設計思路大抵相同，中父子組件生命周期鉤子執行順序，具體沒做探究，但是值得一提的是父組件的也是晚于子組件執行的。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96586.html

相關文章

  • vue生命周期

    摘要：接觸兩個月了，今天說一說里邊很重要的生命周期，記得最開始接觸的時候我問了一下周邊的同事，這些生命周期都有什么用，得到的答案是里邊可以操作屬性，你記住就完事了，于是乎。。。 接觸Vue兩個月了，今天說一說vue里邊很重要的生命周期，記得最開始接觸的時候我問了一下周邊的同事，這些生命周期都有什么用，得到的答案是mounted里邊可以操作屬性，你記住mounted就完事了，于是乎。。。 數據...

    godlong_X 評論0 收藏0

  • [vuejs 踩坑實戰系列] 路由場景下父子組件的生命周期順序來個刨根問底

    摘要：大家中秋假期快樂，假期分享一些原理設計文章給大家原創不易，歡迎轉發，一起學習凌晨寫的，不容易哈，收藏或者點個贊吧在常見的單頁應用中，我們都會有一個根文件，里面放置一個然后配置路由來切換很多人在子父組件嵌套關系下的生命周期鉤子函數如何應用， 大家中秋假期快樂，假期分享一些原理設計文章給大家 原創不易，歡迎轉發，一起學習(凌晨寫的，不容易哈，收藏或者點個贊吧) 在常見的單頁應用中，我們都...

    FreeZinG 評論0 收藏0

  • vue的生命周期解析并通過表單理解MVVM（不僅理論，圖文并茂）

    摘要：在前端頁面中，把用純對象表示，負責顯示，兩者做到了最大限度的分離。的顯示與否和的布爾值有關，還是只關注數據的變化。兩個組件的布爾值通過兩個臨近的按鈕控制，初始值和的結果都是。組件的聲明在組件上，則完全沒有進入生命周期。 開始前說一說 吐槽 首先， 文章有謬誤的地方， 請評論， 我會進行驗證修改。謝謝。 vue真是個好東西，但vue的中文文檔還有很大的改進空間，有點大雜燴的意思，對于怎么...

    silvertheo 評論0 收藏0

  • Vue 生命周期詳解

    摘要：的鉤子函數會在組件停用時被調用。是在構造函數中的聲明的變量執行鉤子函數執行執行鉤子函數執行鉤子函數刷新前根據對中的進行排序。 Vue 生命周期詳解 Vue 生命周期流程 最開始，用戶使用 new Vue() 創建根 Vue 實例，或者 Vue 實例化子組件都會調用_init方法（我們將這兩種實例都稱為vm）： function Vue(options) { //Vue 構...

    snowLu 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<