資訊專欄INFORMATION COLUMN
摘要：結(jié)論父子組件生命周期鉤子的執(zhí)行順序遵循從外到內(nèi)，然后再?gòu)膬?nèi)到外，不管嵌套幾層深，也遵循這個(gè)規(guī)律。組件化的設(shè)計(jì)思路大抵相同，中父子組件生命周期鉤子執(zhí)行順序，具體沒做探究，但是值得一提的是父組件的也是晚于子組件執(zhí)行的。
如今前端框架都流行組件化，頁(yè)面元素都可以使用組件進(jìn)行高度概括，那么處理組件之間的關(guān)系就如同處理頁(yè)面架構(gòu)一樣重要。正確理解組件之間的關(guān)系，才能讓代碼按照我們與預(yù)料方式工作。最近參與了一個(gè)Vue.js的項(xiàng)目，在處理父子嵌套組件之間關(guān)系時(shí)遇到了較大的阻力，雖然問題最后解決了，但是以花費(fèi)大量時(shí)間為代價(jià)的，記錄在這里，希望下次不踩同樣的坑，能更高效的處理此類問題。0 問題描述
同react，vue組件也有一套完整的生命周期，不同階段有不同的分工。總體來講經(jīng)常會(huì)用的生命周期鉤子有以下幾種：
created
mounted
destroy
通常會(huì)在這些鉤子中處理一些異步請(qǐng)求，最常見的就是發(fā)起網(wǎng)絡(luò)請(qǐng)求調(diào)用api獲取數(shù)據(jù)。
這里有個(gè)問題：在單一組件中，鉤子的執(zhí)行順序是created -> mounted -> destroyed，但當(dāng)父子組件嵌套時(shí)，父組件和子組件各擁有各自獨(dú)立的鉤子函數(shù)，這些父子組件的這些鉤子是如何交融執(zhí)行，且執(zhí)行順序又是怎樣的呢?
最近開發(fā)中遇到的一個(gè)“詭異”的問題，就是由于對(duì)父子組件生命周期鉤子執(zhí)行順序理解不透徹引起的。問題是這樣的：有一個(gè)組件有由一系列子組件組成，子組件又被分解成組件，這樣下來就構(gòu)成了三級(jí)組件。需求是在組件顯示在頁(yè)面上之后，再將數(shù)據(jù)初始化進(jìn)行回顯。父組件獲取數(shù)據(jù)后傳遞到子組件，要求子組件根據(jù)這個(gè)值將內(nèi)部元數(shù)據(jù)進(jìn)行過濾和加工。那么在子組件中什么時(shí)機(jī)下才能獲取父組件傳遞過來的新值呢？。
我的做法是這樣的：最高層父組件的mounted中發(fā)起請(qǐng)求獲取數(shù)據(jù)，通過vue的響應(yīng)機(jī)制以props的形式傳遞到子組件，在子組件的mounted中拿到對(duì)應(yīng)的props進(jìn)行處理。這樣做法要求父組件的mounted時(shí)機(jī)先于子組件的mounted,但事實(shí)是這樣嗎？顯然不是。
這樣導(dǎo)致的問題就是，數(shù)據(jù)無法正確的回顯。
1 探究探究的方法是：寫一個(gè)有父子嵌套關(guān)系的組件，分別在他們的鉤子函數(shù)中打印日志，觀察執(zhí)行順序。得到的結(jié)果如圖所示，父組件先創(chuàng)建，然后子組件創(chuàng)建；子組件先掛載，然后父組件掛載。
子組件掛載完成后，父組件還未掛載。所以組件數(shù)據(jù)回顯的時(shí)候，在父組件mounted中獲取api的數(shù)據(jù)，子組件的mounted是拿不到的。
仔細(xì)看看父子組件生命周期鉤子的執(zhí)行順序，會(huì)發(fā)現(xiàn)created這個(gè)鉤子是按照從外內(nèi)順序執(zhí)行，所以回顯場(chǎng)景的解決方案是：在created中發(fā)起請(qǐng)求獲取數(shù)據(jù)，依次在子組件的created中會(huì)接收到這個(gè)數(shù)據(jù)。
2 結(jié)論Vue父子組件生命周期鉤子的執(zhí)行順序遵循：從外到內(nèi)，然后再?gòu)膬?nèi)到外，不管嵌套幾層深，也遵循這個(gè)規(guī)律。
組件化的設(shè)計(jì)思路大抵相同，React中父子組件生命周期鉤子執(zhí)行順序，具體沒做探究，但是值得一提的是react父組件的componentDidMount也是晚于子組件componentDidMount執(zhí)行的。3 其他
關(guān)于回顯，問題在于如何在子組件中知道遠(yuǎn)程數(shù)據(jù)回來了，并且通過對(duì)遠(yuǎn)程數(shù)據(jù)的加工處理，最終形成正確的回顯。處理按照鉤子的順序獲取數(shù)據(jù)，在vue中還有一個(gè)特性watch，是否可以通過watch屬性的方式來更新回顯呢？這種方法有待于探究。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96586.html
摘要：大家中秋假期快樂，假期分享一些原理設(shè)計(jì)文章給大家原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)凌晨寫的，不容易哈，收藏或者點(diǎn)個(gè)贊吧在常見的單頁(yè)應(yīng)用中，我們都會(huì)有一個(gè)根文件，里面放置一個(gè)然后配置路由來切換很多人在子父組件嵌套關(guān)系下的生命周期鉤子函數(shù)如何應(yīng)用， 大家中秋假期快樂，假期分享一些原理設(shè)計(jì)文章給大家 原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)(凌晨寫的，不容易哈，收藏或者點(diǎn)個(gè)贊吧) 在常見的單頁(yè)應(yīng)用中，我們都...
摘要：在前端頁(yè)面中，把用純對(duì)象表示，負(fù)責(zé)顯示，兩者做到了最大限度的分離。的顯示與否和的布爾值有關(guān)，還是只關(guān)注數(shù)據(jù)的變化。兩個(gè)組件的布爾值通過兩個(gè)臨近的按鈕控制，初始值和的結(jié)果都是。組件的聲明在組件上，則完全沒有進(jìn)入生命周期。 開始前說一說 吐槽 首先， 文章有謬誤的地方， 請(qǐng)?jiān)u論， 我會(huì)進(jìn)行驗(yàn)證修改。謝謝。 vue真是個(gè)好東西，但vue的中文文檔還有很大的改進(jìn)空間，有點(diǎn)大雜燴的意思，對(duì)于怎么...
摘要：的鉤子函數(shù)會(huì)在組件停用時(shí)被調(diào)用。是在構(gòu)造函數(shù)中的聲明的變量執(zhí)行鉤子函數(shù)執(zhí)行執(zhí)行鉤子函數(shù)執(zhí)行鉤子函數(shù)刷新前根據(jù)對(duì)中的進(jìn)行排序。 Vue 生命周期詳解 Vue 生命周期流程 最開始，用戶使用 new Vue() 創(chuàng)建根 Vue 實(shí)例，或者 Vue 實(shí)例化子組件都會(huì)調(diào)用_init方法（我們將這兩種實(shí)例都稱為vm）： function Vue(options) { //Vue 構(gòu)...
閱讀 1424·2021-11-24 10:20
閱讀 3662·2021-11-24 09:38
閱讀 2309·2021-09-27 13:37
閱讀 2212·2021-09-22 15:25
閱讀 2286·2021-09-01 18:33
閱讀 3502·2019-08-30 15:55
閱讀 1799·2019-08-30 15:54
閱讀 2103·2019-08-30 12:50
