suchen

Heim  >  Artikel  >  Web-Frontend  >  Es gibt Beispiele für asynchrone Komponenten in Vue

Es gibt Beispiele für asynchrone Komponenten in Vue

亚连
亚连Original
2018-06-15 11:29:211579Durchsuche

Jeder weiß, dass das Laden der erforderlichen Komponenten nur bei Verwendung die Geschwindigkeit beim ersten Laden der Seite effektiv verbessern kann. Wenn Sie beispielsweise die Route wechseln, werden Ihnen im folgenden Artikel hauptsächlich die relevanten Informationen zur Implementierung einer einfachen asynchronen Vue-Komponente vorgestellt. Freunde, die sie benötigen, können darauf verweisen.

Vorwort

Bei großen Anwendungen müssen wir die Anwendung möglicherweise in mehrere kleine Module aufteilen und diese bei Bedarf vom Server herunterladen. Um die Sache noch weiter zu vereinfachen, können Sie mit Vue.js eine Komponente als Factory-Funktion definieren, die die Komponentendefinition asynchron auflöst. Vue.js löst die Factory-Funktion nur dann aus, wenn die Komponente gerendert werden muss, und speichert die Ergebnisse für ein späteres erneutes Rendern zwischen.

Warum werden asynchrone Komponenten benötigt? Der Grund ist der gleiche wie beim On-Demand-Laden von Webpack. Wenn alle Komponenten zu Beginn geladen werden, ist dies zeitaufwändiger, sodass wir einige Komponenten als asynchrone Komponenten definieren können . Laden Sie es bei Bedarf.

Die Vorteile liegen also auf der Hand:

  • Das Laden auf Abruf kann die Zeit des ersten Ladens sparen, die Geschwindigkeit erhöhen und ist auch eine Leistung Optimierung.

  • Dann kann eine Komponente mehrmals verwendet werden. Wenn sie bei Bedarf geladen wird, wird sie nicht mehrmals geladen. Sie wird nach Abschluss des ersten Ladevorgangs zwischengespeichert Dasselbe wie Webpack, also keine Sorge

Als ich kürzlich die Vue-Dokumentation las, warf ich einen genaueren Blick auf den Teil der asynchronen Komponenten Als ich es das zweite Mal las, war ich immer noch etwas verwirrt. Beim dritten Mal war ich etwas verwirrt, und beim vierten Mal hatte ich das Gefühl, dass es klarer war Das Folgende ist eine einfache Demo der asynchronen Vue-Komponente, die ich geschrieben habe.

Beispielcode

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>

Asynchrone Komponente Async-Comp.js,

Beachten Sie , dass Async-Comp.js nicht in index.html referenziert wird, sondern dynamisch in main.js unten geladen wird. 

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
   }
  }
 }
} )

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Positionierungsnavigation mit jquery

So implementieren Sie den Wechsel des linken und rechten Karussells in jquery

So verwenden Sie jquery, um einen Floor-Scrolling-Effekt zu erzielen

So erhalten Sie Daten und weisen sie der Seite in jQuery zu

in drei So implementieren Sie die 3D-Modellanzeige in .js

Das obige ist der detaillierte Inhalt vonEs gibt Beispiele für asynchrone Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie Webpack JS- und CSS-Dateien verpacktNächster Artikel：Wie Webpack JS- und CSS-Dateien verpackt

In Verbindung stehende Artikel

Mehr sehen