動態加載
就目前而言，已經在如何將組件放置到用戶屏幕上增加了價值，但是仍然可以看到它的問題，仍需將組建手動添加到應用程序中，並且即使瀏覽站點的用戶永遠看不到它們，也將全部加載這些組件。
採取一些步驟，使這些組件根據瀏覽器的要求動態加載，這將使應用程序包更小，因爲webpack會將它們放置在外部塊中。
對於這種方法，我們將修改計算屬性來返回一個函數，該函數將動態地導入組件。
<script>
const Guest = () => import("./components/Guest")
const User = () => import("./components/User")
const Member = () => import("./components/Member")
export default {
data() {
return {
user: null
};
},
computed: {
userComponent() {
if (!this.user) return Guest;
if (this.user && !this.user.subscription)
return User;
if (this.user && this.user.subscription)
return Member;
}
}
};
</script>
首先請注意，頂部的所有import語句現在都消失了。 這不再是必需的，因爲組件將根據需要動態且異步地加載。 但是，我們選擇在頂部創建const變量來導入它們。
如果直接在計算屬性中返回import語句，則每次執行該語句都會返回一個新函數。如果以後您想使用<keep-alive>元素，則不會保留您的狀態。
userComponent計算屬性進行了重構，現在它分別返回帶有import語句的函數，此函數本身返回一個將分解爲組件的promise，即…drumroll…
如果您不關心沒有返回語法的arrow函數，可以這樣重寫return語句：
const User = function() {
return import('./components/Guest')
}
關於<component>值得一提的小問題是<keep-alive>的特殊元素。
有時您會希望用戶在應用程序內的不同元素之間切換。 想象一下，如果在我們的演示場景中，該成員還可以訪問一個按鈕，以切換到“用戶”視圖來使用某些其他功能。
您只需在計算的屬性中添加一些額外的邏輯即可通過單擊按鈕在它們之間切換，但是當用戶開始使用每個組件並來回跳轉時，它們將遇到一個非常特殊的問題 - Vue是 當用戶在組件之間切換時，銷燬並重新安裝組件，本地存儲在組件中的任何狀態都將完全丟失。
對於要使組件保持激活狀態的這類場景，您可以在dev-belt上使用此工具。
<keep-alive> <component :is="userComponent"/> </keep-alive>
通過簡單地將<component>包裝在<keep-alive>中，Vue將開始緩存並保留這些組件在屏幕上交換時的狀態。
如果直接在計算屬性中返回導入函數，由於JavaScript比較的工作方式，該狀態將不會被緩存。 簡而言之，功能將不完全相同。
設置App.vue，以便可以輕鬆地在要測試的組件之間切換。
<template>
<div id="app">
<keep-alive>
<component :is="userComponent"/>
</keep-alive>
<br>
<button @click="user = null">Guest</button>
<button @click="user = {}">User</button>
<button @click="user = {subscription: true}">Member</button>
</div>
</template>
<script>
const Guest = () => import("./components/Guest");
const User = () => import("./components/User");
const Member = () => import("./components/Member");
export default {
data() {
return {
user: null
};
},
computed: {
userComponent() {
if (!this.user) return Guest;
if (this.user && !this.user.subscription) return User;
if (this.user && this.user.subscription) return Member;
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
此外，對User.vue進行一些更改來添加基本的內部狀態進行測試。
<template>
<div>
<div>User component {{ count }}</div>
<br>
<button @click="count++">MOAR!</button>
</div>
</template>
<script>
export default {
name:'User',
data() {
return {
count: 0
}
}
}
</script>
如果您現在單擊MOAR按鈕並增加計數器並在不同組件之間切換，則應該能夠看到該狀態已正確保存給用戶。