大家都知道使用時才裝入需要的元件，可以有效的提升首次裝入頁面的速度。例如在路由切換時，以下這篇文章主要為大家介紹了關於如何實現一個簡單的Vue非同步元件的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考下。
前言
在大型應用程式中，我們可能需要將應用程式拆分為多個小模組，按需從伺服器下載。為了進一步簡化，Vue.js 允許將元件定義為一個工廠函數，非同步地解析元件的定義。 Vue.js 只在元件需要渲染時觸發工廠函數，並且把結果快取起來，用於後面的再次渲染。
為什麼需要非同步元件，道理和webpack的按需載入是一樣的，如果一開始就載入所有的元件，那麼是比較耗時的，所以我們可以將一些元件定義為非同步元件，在需要使用的時候再進行載入。
所以好處的話就顯而易見了：
按需加載，可以節省首次加載的時間，提高速度，也算是一個性能優化。
那麼一個元件可能會被使用多次，按需載入的話也不會載入多次，第一次載入完成就會快取下來，和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
}
}
}
} )上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
#以上是在Vue中有關於非同步組件的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
