快捷導(dǎo)航

簡單的Vue異步組件實(shí)例Demo

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

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

前言

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

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

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

按需加載，可以節(jié)省首次加載的時(shí)間，提高速度，也算是一個(gè)性能優(yōu)化。
那么一個(gè)組件可能會(huì)被使用多次，按需加載的話也不會(huì)加載多次，第一次加載完成就會(huì)緩存下來，和webpack是一樣的，所以不用擔(dān)心

最近讀Vue文檔的時(shí)候仔細(xì)看了一下異步組件部分，第一次看的時(shí)候一臉懵逼，看第二次還是有點(diǎn)迷茫，第三次就有點(diǎn)感覺了，第四次感覺有點(diǎn)明白了，遂記錄一下，下面是我寫的一個(gè)簡單Vue異步組件Demo。

實(shí)例代碼

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="['我是一個(gè)異步組件，','如果加載完成，','我就會(huì)在這里顯示']"></async-comp>
  </div>

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

異步組件Async-Comp.js，

注意，Async-Comp.js并沒有在index.html中引用，而是在下面的main.js中動(dòng)態(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 {
    /** 要渲染的異步組件，必須是一個(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: '<p>loading...</p>'
    },
    /* 出現(xiàn)錯(cuò)誤時(shí)顯示的組件 */
    error: {
     template: '\
      <p style="color:red;">load failed!</p>\
     '
    },
    /* loading組件的延遲時(shí)間 */
    delay: 10,
    /* 最長等待時(shí)間，如果超過此時(shí)間，將顯示error組件。 */
    timeout:3200
   }
  }
 }
} )

github地址：點(diǎn)擊這里

總結(jié)

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

您可能感興趣的文章: