大家都知道使用時才裝入需要的元件，可以有效的提升首次裝入頁面的速度。例如在路由切換時，以下這篇文章主要為大家介紹了關於如何實現一個簡單的Vue非同步元件的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考下。
前言
在大型應用程式中，我們可能需要將應用程式拆分為多個小模組，按需從伺服器下載。為了進一步簡化，Vue.js 允許將元件定義為一個工廠函數，非同步地解析元件的定義。 Vue.js 只在元件需要渲染時觸發工廠函數，並且把結果快取起來，用於後面的再次渲染。
為什麼需要非同步元件，道理和webpack的按需載入是一樣的，如果一開始就載入所有的元件，那麼是比較耗時的，所以我們可以將一些元件定義為非同步元件，在需要使用的時候再進行載入。
所以好處的話就顯而易見了：
最近讀Vue文件的時候仔細看了一下非同步組件部分，第一次看的時候一臉懵逼，看第二次還是有點迷茫，第三次就有點感覺了，第四次感覺有點明白了，遂記錄一下，下面是我寫的一個簡單Vue異步組件Demo。
實例程式碼
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<script>
// 如果浏览器不支持Promise就加载promise-polyfill
if ( typeof Promise === 'undefined' ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
document.head.appendChild( script );
}
</script>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<p id="app" style="font-size: 22px">
<!-- 异步组件async-comp -->
<async-comp :list="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"></async-comp>
</p>
<!-- 引入main.js -->
<script src="/main.js"></script>
</body>
</html>登入後複製
非同步元件Async-Comp.js，
注意，Async-Comp.js並沒有在index.html中引用，而是在下面的main.js中動態載入。
window.async_comp = {
template: '\
<ol>\
<li v-for="item in list">{{ item }}</li>\
</ol>',
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: '<p>loading...</p>'
},
/* 出现错误时显示的组件 */
error: {
template: '\
<p style="color:red;">load failed!</p>\
'
},
/* loading组件的延迟时间 */
delay: 10,
/* 最长等待时间，如果超过此时间，将显示error组件。 */
timeout:3200
}
}
}
} )登入後複製
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
使用jquery如何實現定位式導航
在jquery中如何實現左右輪播切換
使用jquery如何實現樓層滾動效果
在jQuery中如何取得資料賦值給頁面
在three .js中如何實作3D模型展示
#
以上是在Vue中有關於非同步組件的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
