父子元件的生命週期執行流程是怎麼樣的呢?
在vue中有一道面試必問題,那就是vue的生命週期。
月薪5K的回答:
beforeCreate=>created=>beforeMount=>mounted=> beforeUpdate=>updated=>beforeDestroy=>destroyed
有點經驗的能勉強扯扯keep-alive的兩個生命週期:
activated和deactivated
正文:
我們都知道vue是元件化開發思想,下面來丟擲我們日常開發中最常見的一個業務場景,比如一個編輯功能如下圖:有兩個元件,父元件巢狀子元件,在子元件裡面有一個下拉選擇框,我們在父元件裡面調後端介面獲取資料,傳給子元件,渲染到頁面。你是怎麼做的呢?
一、錯誤寫法:
在父元件的Created,獲取資料賦值給data物件,然後通過prop的方式傳給子元件,子元件在Created裡面接收處理資料,渲染到頁面。
對於元件通訊,要補課的同學可以看看我這篇文章。
下面我們來演示這種錯誤寫法:
父元件:
子元件:
子元件資料:
在子元件的ceated裡面處理父元件傳過來的資料:
頁面效果:
頁面顯示了列舉值5對應的城市:廈門。
很多人是不是在想:咦~東東吖,你不是說這是錯誤寫法嗎?這不就是我們想要的效果嗎?我平時也是這樣寫的,沒有問題呀!!!
別急,我們是不是漏了什麼呢???我剛剛說的是從後端獲取資料,從後端獲取資料我們的資料會受到網路等因素的影響,那代表什麼?那代表會有非同步產生。
我們用settimeout來模擬非同步請求。
這個時候我們會發現,我們的頁面是沒有選中的,平時大家這樣寫,是會有bug的,因為我們的資料會受到網路等因素制約,當後端返回的資料比較快時,我們可能在頁面正常展示了資料,但當後端返回的資料較慢時,我們的頁面就不能正常地展示資料,就會出現bug,而且這種bug不是必現的,有的同學就會覺得很詭異。對了,這裡除了網路因素,元件被v-show控制時,元件沒有被銷燬,只會在第一次走created這個生命週期,比如你點選多條資料的編輯按鈕,還可能出現上一條的資料。我們需要編輯的時候把上一次的值置空,再獲取對應的值賦值
那怎麼解決呢?我們都是知道初次渲染,單元件的生命週期是:
beforeCreate=>created=>beforeMount=>mounted
那父子元件他們的生命週期又是怎麼樣的呢?
少廢話,控制檯:
我們發現父子元件的生命週期執行流程:父元件執行了前三個生命週期:beforeCreate=>created=>beforeMounted,然後等子元件執行完四個生命週期:beforeCreate=>created=>beforeMount=>mounted,父元件再執行了mountedued
父元件先執行了Created這個生命週期,然後等子元件執行了Created,最後再掛載的,按道理我們在父元件的Created裡面通過props傳值,在子元件的Created裡面處理資料是沒問題的,但是你有沒有想過,我們的生命週期不會等我們的非同步請求呀,尤雨溪對vue做效能設計的時候可沒那麼傻。
對了,尤雨溪懂個錘子vue(滑稽)!來人,給我把尤雨溪摁住!!!前兩天聽他直播講vue3的生態,最近一兩個月他就要強制更新vue的官網到vue3了。
迴歸正題:
我們在父元件的Created裡面模擬一個非同步請求:
在父子元件裡面的created裡面列印這個列舉值值,開啟控制檯檢視結果:
我們發現無論父元件還是子元件,我們都不能獲取到我們的列舉值6
要想在子元件獲取到這個列舉值6,渲染到頁面上,我們應該怎麼做呢?
二、野雞寫法:
這時候,有的同學就會想到,我們只要在子元件裡面獲取到這個值,就能解決這個bug,那我們能不能利用v-if重新構建vue例項呢?從而打斷我們的父子元件原本的生命週期執行流程。當value存在的時候再渲染這個子元件
我們開啟控制檯檢視結果,發現父子元件的生命週期執行流程被v-if阻斷了,變成了兩個單元件的生命週期,先執行了父元件,當value這個值存在的時候,再建立vue例項,執行子元件的生命週期,並在子元件成功獲取到了這個列舉值6
頁面效果:
這個時候頁面確實展示了我們想要的效果,但是這個子元件是獲取到值了,才渲染的,也就是說,他獲取到值了,整個子元件1秒後才閃現展示到我們的頁面的(自行想象),我不能說你這種寫法錯誤,只能這種寫法真的野雞。
野雞???
啥是野雞? 懂的都懂,不懂的請輸入以下詞條自行類比:
三、家雞寫法:
用watch監聽屬性值,監聽到值後,再處理資料。
開啟控制檯,我們是發現我們是能在watch裡面監聽到這個列舉值6的。
頁面效果:"美麗,這個問題解決了"。
最後補充一點:我們這裡是監聽的一個屬性,當我們監聽的是一個物件,還需要利用deep深度監聽,並通過immediate立即渲染。這裡我就不再演示了,同學們自己試一試哦(其實是因為我懶,不想寫示例了,哈哈哈)
總結:
對於一些配置資料,比如我們需要傳入一個屬性,來控制disabled,這種可以直接在元件上賦值,類似於第一種Created裡面直接賦值,不過在元件上直接賦值程式碼更加簡潔。但對於非同步資料,我們必須用watch來監聽賦值,如果監聽的是物件,還需要設定深度監聽和立即渲染兩個屬性。
最後:還有什麼寫法,歡迎在評論區留言哦!
- 東東吖帶你打通全棧,go-vue-react專案介紹
- 【vue進階之旅】如何自定義元件v-model,封裝屬於自己的元件庫?
- 【vue進階之旅】如何使用keep-alive做元件快取?
- 發生跨域的時候,伺服器到底有沒有接收到請求?
- vue進階之路:vue3.2-setup語法糖、組合式API、狀態庫Pinia歸納總結
- 跨域問題及前後端常見解決方案?
- 微信小程式如何分包?
- 前端效能優化,如何提高首屏載入速度?
- 專案中的配置檔案都是幹嘛的?
- 從0到1學習Node.js系列教程(第一篇):API介面初體驗
- 父子元件的生命週期執行流程是怎麼樣的呢?
- 1024程式設計師這天,我發現了掘金官方的一個bug。
- 元件通訊的8種方式,你搞清楚了嗎?
- 手把手教你利用XSS攻擊體驗一次黑客