Vue には非同期コンポーネントの例があります-jsチュートリアル-php.cn

Vue には非同期コンポーネントの例があります

亚连

リリース： 2018-06-15 11:29:21

オリジナル

1561 人が閲覧しました

必要なコンポーネントを使用するときにのみロードすると、初めてページをロードする速度が効果的に向上することは誰もが知っています。たとえば、ルートを切り替える場合、次の記事では主に簡単な Vue 非同期コンポーネントの実装方法について詳しく紹介していますので、必要な方は参考にしてください。

はじめに

大規模なアプリケーションでは、アプリケーションを複数の小さなモジュールに分割し、それらをオンデマンドでサーバーからダウンロードする必要がある場合があります。作業をさらに簡素化するために、Vue.js では、コンポーネント定義を非同期的に解決するファクトリー関数としてコンポーネントを定義できます。 Vue.js は、コンポーネントをレンダリングする必要がある場合にのみファクトリ関数をトリガーし、その後の再レンダリングのために結果をキャッシュします。

なぜ非同期コンポーネントが必要なのか? 理由は、Webpack のオンデマンド読み込みと同じです。最初にすべてのコンポーネントが読み込まれると、より時間がかかるため、必要なときに一部のコンポーネントを非同期コンポーネントとして定義できます。再度ロードしてください。

その利点は明白です:

オンデマンド読み込みにより、最初の読み込み時間が短縮され、速度が向上し、パフォーマンスの最適化も可能になります。
その後、コンポーネントは複数回使用される可能性がありますが、オンデマンドでロードされると、最初のロードが完了した後にキャッシュされますので、使用しないでください。

最近読んだVueのドキュメントを読んだとき、最初に読んだときは混乱していましたが、まだ少し混乱していました。 3 回目でそれを感じ、4 回目で少しはっきりしたと感じたので記録しました。以下は私が書いた簡単な Vue 非同期コンポーネントのデモです。

サンプルコード

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>

ログイン後にコピー

非同期コンポーネントAsync-Comp.js、

Note、Async-Comp.jsはindex.htmlでは参照されていませんが、動的にロードされます以下の main.js にあります。

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

ログイン後にコピー

以上、皆様のお役に立てれば幸いです。

jqueryを使って位置決めナビゲーションを実装する方法

jqueryで左右カルーセル切り替えを実装する方法

jqueryを使ってフロアスクロール効果を実装する方法

データ割り当ての取得方法jQueryでページを与える

three.jsで3Dモデル表示を実装する方法

以上がVue には非同期コンポーネントの例がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。