新聞中心
#概覽
以下是對(duì)變化的高層次概述:

站在用戶(hù)的角度思考問(wèn)題,與客戶(hù)深入溝通,找到宣州網(wǎng)站設(shè)計(jì)與宣州網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品,建站類(lèi)型包括:網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋宣州地區(qū)。
- 新的
defineAsyncComponent助手方法,用于顯式地定義異步組件 component選項(xiàng)重命名為loader- Loader 函數(shù)本身不再接收
resolve和reject參數(shù),且必須返回一個(gè) Promise
如需更深入的解釋?zhuān)?qǐng)繼續(xù)閱讀!
#介紹
以前,異步組件是通過(guò)將組件定義為返回 Promise 的函數(shù)來(lái)創(chuàng)建的,例如:
const asyncPage = () => import('./NextPage.Vue')或者,對(duì)于帶有選項(xiàng)的更高階的組件語(yǔ)法:
const asyncPage = {
component: () => import('./NextPage.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
}#3.x 語(yǔ)法
現(xiàn)在,在 Vue 3 中,由于函數(shù)式組件被定義為純函數(shù),因此異步組件的定義需要通過(guò)將其包裝在新的 defineAsyncComponent 助手方法中來(lái)顯式地定義:
import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// 不帶選項(xiàng)的異步組件
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
// 帶選項(xiàng)的異步組件
const asyncPageWithOptions = defineAsyncComponent({
loader: () => import('./NextPage.vue'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent
}) 對(duì) 2.x 所做的另一個(gè)更改是,component 選項(xiàng)現(xiàn)在被重命名為 loader,以便準(zhǔn)確地傳達(dá)不能直接提供組件定義的信息。
import { defineAsyncComponent } from 'vue'
const asyncPageWithOptions = defineAsyncComponent({
loader: () => import('./NextPage.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
}) 此外,與 2.x 不同,loader 函數(shù)不再接收 resolve 和 reject 參數(shù),且必須始終返回 Promise。
// 2.x 版本
const oldAsyncComponent = (resolve, reject) => {
/* ... */
}
// 3.x 版本
const asyncComponent = defineAsyncComponent(
() =>
new Promise((resolve, reject) => {
/* ... */
})
)有關(guān)異步組件用法的詳細(xì)信息,請(qǐng)參閱:
- 指南:動(dòng)態(tài) & 異步組件
文章標(biāo)題:創(chuàng)新互聯(lián)VUE3教程:Vue 3.0 異步組件
URL分享:http://m.5511xx.com/article/cdjhhse.html


咨詢(xún)
建站咨詢(xún)
