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