動(dòng)態(tài)加載

就目前而言，已經(jīng)在如何將組件放置到用戶屏幕上增加了價(jià)值，但是仍然可以看到它的問題，仍需將組建手動(dòng)添加到應(yīng)用程序中，并且即使瀏覽站點(diǎn)的用戶永遠(yuǎn)看不到它們，也將全部加載這些組件。

采取一些步驟，使這些組件根據(jù)瀏覽器的要求動(dòng)態(tài)加載，這將使應(yīng)用程序包更小，因?yàn)閣ebpack會(huì)將它們放置在外部塊中。

對(duì)于這種方法，我們將修改計(jì)算屬性來返回一個(gè)函數(shù)，該函數(shù)將動(dòng)態(tài)地導(dǎo)入組件。

首先請(qǐng)注意，頂部的所有import語(yǔ)句現(xiàn)在都消失了。 這不再是必需的，因?yàn)榻M件將根據(jù)需要?jiǎng)討B(tài)且異步地加載。 但是，我們選擇在頂部創(chuàng)建const變量來導(dǎo)入它們。

如果直接在計(jì)算屬性中返回import語(yǔ)句，則每次執(zhí)行該語(yǔ)句都會(huì)返回一個(gè)新函數(shù)。如果以后您想使用元素，則不會(huì)保留您的狀態(tài)。

userComponent計(jì)算屬性進(jìn)行了重構(gòu)，現(xiàn)在它分別返回帶有import語(yǔ)句的函數(shù)，此函數(shù)本身返回一個(gè)將分解為組件的promise，即…drumroll…

如果您不關(guān)心沒有返回語(yǔ)法的arrow函數(shù)，可以這樣重寫return語(yǔ)句：

const User = function() {

return import('./components/Guest')

}

關(guān)于值得一提的小問題是的特殊元素。

有時(shí)您會(huì)希望用戶在應(yīng)用程序內(nèi)的不同元素之間切換。 想象一下，如果在我們的演示場(chǎng)景中，該成員還可以訪問一個(gè)按鈕，以切換到“用戶”視圖來使用某些其他功能。

您只需在計(jì)算的屬性中添加一些額外的邏輯即可通過單擊按鈕在它們之間切換，但是當(dāng)用戶開始使用每個(gè)組件并來回跳轉(zhuǎn)時(shí)，它們將遇到一個(gè)非常特殊的問題 – Vue是 當(dāng)用戶在組件之間切換時(shí)，銷毀并重新安裝組件，本地存儲(chǔ)在組件中的任何狀態(tài)都將完全丟失。

對(duì)于要使組件保持激活狀態(tài)的這類場(chǎng)景，您可以在dev-belt上使用此工具。

 

 

 

通過簡(jiǎn)單地將包裝在中，Vue將開始緩存并保留這些組件在屏幕上交換時(shí)的狀態(tài)。

如果直接在計(jì)算屬性中返回導(dǎo)入函數(shù)，由于JavaScript比較的工作方式，該狀態(tài)將不會(huì)被緩存。 簡(jiǎn)而言之，功能將不完全相同。

設(shè)置App.vue，以便可以輕松地在要測(cè)試的組件之間切換。

 

 

 

 

 

 

 

此外，對(duì)User.vue進(jìn)行一些更改來添加基本的內(nèi)部狀態(tài)進(jìn)行測(cè)試。

 

 

 

 

 

 

如果您現(xiàn)在單擊MOAR按鈕并增加計(jì)數(shù)器并在不同組件之間切換，則應(yīng)該能夠看到該狀態(tài)已正確保存給用戶。