Vue動(dòng)態(tài)組件和異步組件

nanchen2251 發(fā)布于2019-08-23 14:57 / 1303人閱讀

摘要：動(dòng)態(tài)組件如果我們打算在一個(gè)地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如頁(yè)，那么給我們提供動(dòng)態(tài)組件。實(shí)現(xiàn)動(dòng)態(tài)組件的加載。的值可以是一個(gè)已經(jīng)注冊(cè)的組件的名字或者一個(gè)組件的選對(duì)象。

動(dòng)態(tài)組件

如果我們打算在一個(gè)地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如tab頁(yè)，那么Vue給我們提供動(dòng)態(tài)組件。

基本使用

Parent.vue

運(yùn)行結(jié)果如下圖：

當(dāng)我們點(diǎn)擊不同的按鈕時(shí)，下面會(huì)切換不同的組件。實(shí)現(xiàn)動(dòng)態(tài)組件的加載。is 的值可以是一個(gè)已經(jīng)注冊(cè)的組件的名字或者一個(gè)組件的選對(duì)象。當(dāng)我們點(diǎn)擊按鈕時(shí)，這個(gè)按鈕的 disabled 為 true 然后我們將給這個(gè)按鈕一個(gè)active 的css類,同時(shí)改變 currentCom 的值

keep-alive:動(dòng)態(tài)組件的緩存

如果我們需要頻繁的切換頁(yè)面，每次都是在組件的創(chuàng)建和銷毀的狀態(tài)間切換，這無(wú)疑增大了性能的開銷。那么我們要怎么優(yōu)化呢？
Vue提供了動(dòng)態(tài)組件的緩存。keep-alive 會(huì)在切換組件的時(shí)候緩存當(dāng)前組件的狀態(tài)，等到再次進(jìn)入這個(gè)組件，不需要重新創(chuàng)建組件，只需要從前面的緩存中讀取并渲染。

Parent.vue(其余地方代碼和上面一樣)

Childs1.vue

Childs2.vue

運(yùn)行結(jié)果如下圖：

"

對(duì)比：如果我們將去掉，運(yùn)行結(jié)果如下圖：

前一組圖片在切換組件的時(shí)候，title從1加到3，然后等下次再切換回來(lái)的時(shí)候,title還是停留在3，從控制臺(tái)可以看出，Childs1.vue這個(gè)組件的mounted的鉤子函數(shù)只有一次。后一組圖片，title一開始加到3，下一次進(jìn)入這個(gè)組件的時(shí)候title又從1開始，控制臺(tái)圖片也顯示這個(gè)組件經(jīng)歷個(gè)了多次鉤子函數(shù)，說(shuō)明組件是銷毀重建的。

tips:因?yàn)榫彺娴慕M件只需要建立一次，所以如果我們要在每次進(jìn)入組件的鉤子函數(shù)里面做相應(yīng)的操作的時(shí)候，會(huì)出現(xiàn)問(wèn)題，所以請(qǐng)明確我們使用的場(chǎng)景，避免出現(xiàn)bug

異步組件

異步組件存在的意義在于加載一個(gè)體量很大的頁(yè)面時(shí)，如果我們不設(shè)置加載的優(yōu)先級(jí)的話，那么可能頁(yè)面在加載視頻等信息的時(shí)候會(huì)非常占用時(shí)間，然后主要信息就會(huì)阻塞在后面在加載。這對(duì)用戶來(lái)說(shuō)無(wú)疑不是一個(gè)很差的體驗(yàn)。但是如果我們?cè)O(shè)置加載的順序，那么我們可以優(yōu)先那些最重要的信息優(yōu)先顯示，優(yōu)化了整個(gè)項(xiàng)目。一般來(lái)說(shuō)我們是將加載組件和路由（vue-router）配合在一起使用，所以這里我就不細(xì)講了，具體學(xué)習(xí)可以參考官網(wǎng)來(lái)進(jìn)行學(xué)習(xí)。