資訊專欄INFORMATION COLUMN
摘要：異步組件在大型應(yīng)用中，我們可能需要將應(yīng)用拆分為多個(gè)小模塊，按需從服務(wù)器下載。為了進(jìn)一步簡(jiǎn)化，允許將組件定義為一個(gè)工廠函數(shù)，異步地解析組件的定義。下面是我寫的一個(gè)簡(jiǎn)單異步組件。
Vue異步組件Demo
在大型應(yīng)用中，我們可能需要將應(yīng)用拆分為多個(gè)小模塊，按需從服務(wù)器下載。為了進(jìn)一步簡(jiǎn)化，Vue.js 允許將組件定義為一個(gè)工廠函數(shù)，異步地解析組件的定義。Vue.js 只在組件需要渲染時(shí)觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染。
下面是我寫的一個(gè)簡(jiǎn)單Vue異步組件Demo。
index.html
Document
異步組件Async-Comp.js，
注意，Async-Comp.js并沒有在index.html中引用，而是在下面的main.js中動(dòng)態(tài)加載。
window.async_comp = {
template: "
- {{ item }}
",
props: {
list: Array
}
};
main.js
var vm = new Vue( {
el: "#app",
components: {
/* 異步組件async-comp */
"async-comp": function () {
return {
/** 要渲染的異步組件，必須是一個(gè)Promise對(duì)象 */
component: new Promise( function ( resolve, reject ) {
var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "/Async-Comp.js";
document.head.appendChild( script );
script.onerror = function () {
reject( "load failed!" );
}
script.onload = function () {
if ( typeof async_comp !== "undefined" )
resolve( async_comp );
else reject( "load failed!" )
}
} ),
/* 加載過程中顯示的組件 */
loading: {
template: "loading...
"
},
/* 出現(xiàn)錯(cuò)誤時(shí)顯示的組件 */
error: {
template: "
load failed!
"
},
/* loading組件的延遲時(shí)間 */
delay: 10,
/* 最長(zhǎng)等待時(shí)間，如果超過此時(shí)間，將顯示error組件。 */
timeout:3200
}
}
}
} )
see github
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90402.html
摘要：本文主要對(duì)組件化開發(fā)中子組件的異步加載和其生命周期進(jìn)行一些探討。異步組件討論異步加載，需要先了解下異步組件。生命周期控制在使用子組件或者叫局部注冊(cè)時(shí)，我們可能需要在子組件實(shí)例化或者叫創(chuàng)建完畢后做某些事情。 前端開發(fā)社區(qū)的繁榮，造就了很多優(yōu)秀的基于 MVVM 設(shè)計(jì)模式的框架，而組件化開發(fā)思想也越來越深入人心。這其中不得不提到 Vue.js 這個(gè)專注于 VM 層的框架。 本文主要對(duì) Vue...
摘要：本篇文章主要是我在開發(fā)前研究了的單頁面應(yīng)用，因?yàn)樾枰玫降模源_保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個(gè)單頁面應(yīng)用，具體關(guān)于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。 本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁面應(yīng)用，因?yàn)樾枰玫絥ode的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項(xiàng)目中需要加載一些np...
摘要：前言的單文件組件看著十分誘人，必須要上心有不甘，搗騰一番就有了這個(gè)不需要也能輕松愉快的用上單文件組件主要針對(duì)輕度使用場(chǎng)景，快速應(yīng)用大型應(yīng)用，專業(yè)前端，工程化前端還是更好快速入門單例組件是一種特殊的全局組件，和插件有點(diǎn)相似，只不過插件可以有更 前言 Vue 的單文件組件（Single File Component）看著十分誘人，But 必須要上 webpack心有不甘，搗騰一番就有了這個(gè)...
摘要：有興趣的同學(xué)可以查看之前發(fā)布的文章學(xué)習(xí)系列一學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列二學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列三和網(wǎng)絡(luò)傳輸相關(guān)知識(shí)的學(xué)習(xí)實(shí)踐學(xué)習(xí)系列四打包工具的使用學(xué)習(xí)系列五從來聊聊學(xué)習(xí)系列項(xiàng)目地址項(xiàng)目暫時(shí)有點(diǎn)亂，之后會(huì)進(jìn)行整理優(yōu)化。 上次學(xué)習(xí)了vue-router的使用，讓我能夠在各個(gè)頁面間切換，將頁面搭建了起來。這次則要學(xué)習(xí)vue的狀態(tài)管理模式——vuex。它類似于redux來應(yīng)用的全局狀態(tài)。 注：本...
閱讀 1599·2021-11-16 11:44
閱讀 7492·2021-09-22 15:00
閱讀 4525·2021-09-02 10:20
閱讀 1955·2021-08-27 16:20
閱讀 2402·2019-08-26 14:00
閱讀 2916·2019-08-26 11:44
閱讀 1647·2019-08-23 18:33
閱讀 1878·2019-08-22 17:28
