簡單的Vue異步組件實例Demo

更新時間：2017年12月27日 10:46:02 作者：嘵嘵

大家都知道當使用時才裝入需要的組件，可以有效的提高首次裝入頁面的速度。比如在路由切換時，下面這篇文章主要給大家介紹了關于如何實現(xiàn)一個簡單的Vue異步組件的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。

前言

在大型應用中，我們可能需要將應用拆分為多個小模塊，按需從服務器下載。為了進一步簡化，Vue.js 允許將組件定義為一個工廠函數(shù)，異步地解析組件的定義。Vue.js 只在組件需要渲染時觸發(fā)工廠函數(shù)，并且把結果緩存起來，用于后面的再次渲染。

為什么需要異步組件，道理和webpack的按需加載是一樣的，如果一開始就加載所有的組件，那么是比較耗時的，所以我們可以將一些組件定義為異步組件，在需要使用的時候再進行加載。

所以好處的話就顯而易見了：

按需加載，可以節(jié)省首次加載的時間，提高速度，也算是一個性能優(yōu)化。
那么一個組件可能會被使用多次，按需加載的話也不會加載多次，第一次加載完成就會緩存下來，和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>
  <div id="app" style="font-size: 22px">
   <!-- 異步組件async-comp -->
   <async-comp :list="['我是一個異步組件，','如果加載完成，','我就會在這里顯示']"></async-comp>
  </div>

  <!-- 引入main.js  -->
  <script src="/main.js"></script>
 </body>
</html>

異步組件Async-Comp.js，

注意，Async-Comp.js并沒有在index.html中引用，而是在下面的main.js中動態(tài)加載。

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>'
    },
    /* 出現(xiàn)錯誤時顯示的組件 */
    error: {
     template: '\
      <p style="color:red;">load failed!</p>\
     '
    },
    /* loading組件的延遲時間 */
    delay: 10,
    /* 最長等待時間，如果超過此時間，將顯示error組件。 */
    timeout:3200
   }
  }
 }
} )

github地址：點擊這里

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

使用keep-alive時,數(shù)據(jù)無法刷新的問題及解決
這篇文章主要介紹了使用keep-alive時,數(shù)據(jù)無法刷新的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue-router子路由的實現(xiàn)方式
這篇文章主要介紹了vue-router子路由的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法
本篇文章主要介紹了vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
詳解如何在vue項目中使用lodop打印插件
這篇文章主要介紹了詳解如何在vue項目中使用lodop打印插件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
element?ui設置table自適應表格寬,不自動換行問題
這篇文章主要介紹了element?ui設置table自適應表格寬,不自動換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能
這篇文章主要介紹了Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
Vue非父子組件通信詳解
這篇文章主要為大家詳細介紹了Vue非父子組件通信的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
vue2.0如何借用vue-pdf實現(xiàn)在線預覽pdf文件
這篇文章主要介紹了vue2.0如何借用vue-pdf實現(xiàn)在線預覽pdf文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue項目如何使用three.js實現(xiàn)vr360度全景圖片預覽
這篇文章主要介紹了vue項目如何使用three.js實現(xiàn)vr360度全景圖片預覽,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue實現(xiàn)簡單實時匯率計算功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單實時匯率計算功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01