Kendo UI for Vue最新版下載

動態(tài)加載

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

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

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

<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語句現(xiàn)在都消失了。 這不再是必需的，因為組件將根據(jù)需要動態(tài)且異步地加載。 但是，我們選擇在頂部創(chuàng)建const變量來導(dǎo)入它們。

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

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

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

const User = function() {
return import('./components/Guest')
}

關(guān)于<component>值得一提的小問題是<keep-alive>的特殊元素。

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

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

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

<keep-alive>
<component :is="userComponent"/>
</keep-alive>

通過簡單地將<component>包裝在<keep-alive>中，Vue將開始緩存并保留這些組件在屏幕上交換時的狀態(tài)。

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

設(shè)置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進行一些更改來添加基本的內(nèi)部狀態(tài)進行測試。

<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>

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