Maison > Article > interface Web > Il existe des exemples de composants asynchrones dans Vue

Il existe des exemples de composants asynchrones dans Vue

亚连original: 2018-06-15 11:29:211529parcourir

Tout le monde sait que charger les composants requis uniquement lorsqu'ils sont utilisés peut améliorer efficacement la vitesse de chargement de la page pour la première fois. Par exemple, lors du changement d'itinéraire, l'article suivant vous présente principalement les informations pertinentes sur la façon d'implémenter un simple composant asynchrone Vue. L'article le présente en détail via un exemple de code. Les amis qui en ont besoin peuvent s'y référer.

Préface

Dans les grandes applications, nous pouvons avoir besoin de diviser l'application en plusieurs petits modules et de les télécharger depuis le serveur à la demande. Pour simplifier encore plus les choses, Vue.js vous permet de définir un composant en tant que fonction d'usine qui résout la définition du composant de manière asynchrone. Vue.js ne déclenche la fonction d'usine que lorsque le composant doit être rendu et met en cache les résultats pour un nouveau rendu ultérieur.

Pourquoi des composants asynchrones sont-ils nécessaires ? La raison est la même que pour le chargement à la demande du webpack. Si tous les composants sont chargés au début, cela prendra plus de temps, nous pouvons donc définir certains composants comme des composants asynchrones. . Chargez-le si nécessaire.

Les avantages sont donc évidents :

Le chargement à la demande peut gagner du temps lors du premier chargement, augmenter la vitesse, et constitue également une performance optimisation.
Ensuite, un composant peut être utilisé plusieurs fois s'il est chargé à la demande, il ne sera pas chargé plusieurs fois. Il sera mis en cache une fois le premier chargement terminé. pareil que webpack, donc ne vous inquiétez pas

Lorsque je lisais récemment la documentation de Vue, j'ai regardé de plus près la partie composant asynchrone. La première fois que je l'ai lu, j'étais. confus. La deuxième fois que je l'ai lu, j'étais encore un peu confus. La troisième fois, j'ai eu une idée, et j'ai senti que c'était plus clair la quatrième fois, alors je l'ai enregistré. Ce qui suit est une simple démo de composant asynchrone Vue. J'ai écrit.

Exemple de code

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 === &#39;undefined&#39; ) {
    var script = document.createElement( &#39;script&#39; );
    script.type = &#39;text/javascript&#39;;
    script.src = &#39;https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js&#39;;
    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="[&#39;我是一个异步组件，&#39;,&#39;如果加载完成，&#39;,&#39;我就会在这里显示&#39;]"></async-comp>
  </p>

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

Composant asynchrone Async-Comp.js,

Notez que Async-Comp.js n'est pas référencé dans index.html, mais est chargé dynamiquement dans main.js ci-dessous.

window.async_comp = {
 template: &#39;\
  <ol>\
   <li v-for="item in list">{{ item }}</li>\
  </ol>&#39;,
 props: {
  list: Array
 }
};

main.js

var vm = new Vue( {
 el: &#39;#app&#39;,
 components: {
  /* 异步组件async-comp */
  &#39;async-comp&#39;: function () {
   return {
    /** 要渲染的异步组件，必须是一个Promise对象 */
    component: new Promise( function ( resolve, reject ) {
     var script = document.createElement( &#39;script&#39; );
     script.type = &#39;text/javascript&#39;;
     script.src = &#39;/Async-Comp.js&#39;;
     document.head.appendChild( script );
     script.onerror = function () {
      reject( &#39;load failed!&#39; );
     }

     script.onload = function () {
      if ( typeof async_comp !== &#39;undefined&#39; )
       resolve( async_comp );
      else reject( &#39;load failed!&#39; )
     }
    } ),
    /* 加载过程中显示的组件 */
    loading: {
     template: &#39;<p>loading...</p>&#39;
    },
    /* 出现错误时显示的组件 */
    error: {
     template: &#39;\
      <p style="color:red;">load failed!</p>\
     &#39;
    },
    /* loading组件的延迟时间 */
    delay: 10,
    /* 最长等待时间，如果超过此时间，将显示error组件。 */
    timeout:3200
   }
  }
 }
} )

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.

Articles Liés

Voir plus