建站
咨詢
售后
建站咨詢
新聞中心
該頁(yè)面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對(duì)組件不太了解，推薦你先閱讀它。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括多倫網(wǎng)站建設(shè)、多倫網(wǎng)站制作、多倫網(wǎng)頁(yè)制作以及多倫網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，多倫網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到多倫省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
#在動(dòng)態(tài)組件上使用 keep-alive
我們之前曾經(jīng)在一個(gè)多標(biāo)簽的界面中使用 is attribute 來切換不同的組件：
當(dāng)在這些組件之間切換的時(shí)候，你有時(shí)會(huì)想保持這些組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問題。例如我們來展開說一說這個(gè)多標(biāo)簽界面：
點(diǎn)擊此處實(shí)現(xiàn)
你會(huì)注意到，如果你選擇了一篇文章，切換到 Archive 標(biāo)簽，然后再切換回 Posts，是不會(huì)繼續(xù)展示你之前選擇的文章的。這是因?yàn)槟忝看吻袚Q新標(biāo)簽的時(shí)候，Vue 都創(chuàng)建了一個(gè)新的 currentTabComponent 實(shí)例。
重新創(chuàng)建動(dòng)態(tài)組件的行為通常是非常有用的，但是在這個(gè)案例中，我們更希望那些標(biāo)簽的組件實(shí)例能夠被在它們第一次被創(chuàng)建的時(shí)候緩存下來。為了解決這個(gè)問題，我們可以用一個(gè)
來看看修改后的結(jié)果：
點(diǎn)擊此處實(shí)現(xiàn)
現(xiàn)在這個(gè) Posts 標(biāo)簽保持了它的狀態(tài) (被選中的文章) 甚至當(dāng)它未被渲染時(shí)也是如此。你可以在這個(gè)示例查閱到完整的代碼。
你可以在 API 參考文檔查閱更多關(guān)于
#異步組件
在大型應(yīng)用中，我們可能需要將應(yīng)用分割成小一些的代碼塊，并且只在需要的時(shí)候才從服務(wù)器加載一個(gè)模塊。為了簡(jiǎn)化，Vue 有一個(gè) defineAsyncComponent 方法：
const app = Vue.createApp({})
const AsyncComp = Vue.defineAsyncComponent(
() =>
new Promise((resolve, reject) => {
resolve({
template: 'I am async!'
})
})
)
app.component('async-example', AsyncComp) 如你所見，此方法接受返回 Promise 的工廠函數(shù)。從服務(wù)器檢索組件定義后，應(yīng)調(diào)用 Promise 的 resolve 回調(diào)。你也可以調(diào)用 reject(reason)，以指示加載失敗。
你也可以在工廠函數(shù)中返回一個(gè) Promise，所以把 webpack 2 和 ES2015 語(yǔ)法加在一起，我們可以這樣使用動(dòng)態(tài)導(dǎo)入：
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
app.component('async-component', AsyncComp) 當(dāng)在本地注冊(cè)組件時(shí)，你也可以使用 defineAsyncComponent
import { createApp, defineAsyncComponent } from 'vue'
createApp({
// ...
components: {
AsyncComponent: defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
}
})#與 Suspense 一起使用
異步組件在默認(rèn)情況下是可掛起的。這意味著如果它在父鏈中有一個(gè)
異步組件可以選擇退出 Suspense 控制，并通過在其選項(xiàng)中指定 suspensable:false，讓組件始終控制自己的加載狀態(tài)。
你可以在中查看可用選項(xiàng)的列表 API 參考
文章題目：創(chuàng)新互聯(lián)VUE3教程：Vue3.0動(dòng)態(tài)組件&異步組件
網(wǎng)站URL：http://m.fisionsoft.com.cn/article/ccidhop.html
