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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

亚连

Jun 15, 2018 am 11:29 AM

vue2 非同期コンポーネント

必要なコンポーネントを使用するときにのみロードすると、初めてページをロードする速度が効果的に向上することは誰もが知っています。たとえば、ルートを切り替える場合、次の記事では主に簡単な 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7569

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

107

Related knowledge

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか May 16, 2023 pm 09:40 PM

vue2 と vue3 のライフサイクルの実行順序の違いライフサイクルの比較 vue2 の実行順序 beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed vue3 の実行順序 setup=>onBeforeMount= >onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g

Vue2 diffアルゴリズムがすぐわかる（画像と文章で詳しく解説） Mar 17, 2023 pm 08:23 PM

diff アルゴリズムは、同じレベルでツリーノードを比較する効率的なアルゴリズムであり、ツリーをレイヤーごとに検索して横断する必要がなくなります。では、diff アルゴリズムについてどれくらい知っていますか?次の記事では、vue2 の差分アルゴリズムについて詳しく説明していますので、お役に立てれば幸いです。

VUE3 開発の基本: 非同期コンポーネントの使用に関するチュートリアル Jun 15, 2023 pm 11:33 PM

Vue3 は Vue.js の最新メジャーバージョンで、Vue2 と比較して多くの新機能と改善点が含まれています。最も顕著な改善点の 1 つは、非同期コンポーネントの使用です。この記事では、Vue3 の非同期コンポーネントの使用法とテクニックについて詳しく説明します。非同期コンポーネントとは何ですか? Vue では、import ステートメントまたは require 関数を通じてコンポーネントを導入できます。これらのコンポーネントは同期コンポーネントと呼ばれ、そのコードはアプリケーションの起動時にすぐにロードされてコンパイルされます。ただし、アプリケーションが大きくなるにつれて、

Vue が非同期コンポーネントを使用するのはなぜですか? Dec 13, 2022 pm 07:11 PM

非同期コンポーネントを使用する理由: 1. 非同期コンポーネントは、パッケージング結果を削減し、非同期コンポーネントを個別にパッケージ化し、コンポーネントを非同期的にロードすることができるため、大きすぎるコンポーネントの問題を効果的に解決できます。 2. 非同期コンポーネントのコアは関数として定義でき、関数内でインポート構文を使用してファイルの分割ロードを実現できます。

Vue の非同期コンポーネントと Webpack コード分割を使用してアプリケーションのパフォーマンスを向上させる方法 Jul 17, 2023 pm 09:21 PM

Vue の非同期コンポーネントと WebpackCodeSplitting を使用してアプリケーションのパフォーマンスを向上させる方法はじめに: Web アプリケーションがますます複雑になるにつれて、ページの読み込み速度とパフォーマンスが開発者の焦点になっています。アプリケーションのパフォーマンスを向上させるために、Vue の非同期コンポーネントと Webpack の CodeSplitting 機能を利用できます。これら 2 つの機能を組み合わせることで、ページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させることができます。この記事では、Vue の非同期コンポーネントと Web の使用方法を紹介します。

Vue2 と Vue3 で 404 インターフェイスを設定する方法について話しましょう Feb 17, 2023 pm 02:25 PM

この記事では、Vue の学習について説明し、Vue2 および Vue3 で 404 インターフェイスを設定する方法について説明します。

Vue の非同期コンポーネントと Webpack の遅延読み込みを通じてアプリケーションのパフォーマンスを向上させる方法 Jul 18, 2023 pm 04:42 PM

Vue の非同期コンポーネントと Webpack の LazyLoading を通じてアプリケーションのパフォーマンスを向上させる方法インターネットテクノロジの発展に伴い、Web アプリケーションのパフォーマンスの最適化が常に開発者の焦点となってきました。これまで、Web アプリケーションのパフォーマンスの最適化は、主にフロントエンドリソースの削減とバックエンドインターフェイスの最適化に重点が置かれていました。ただし、Vue.js の人気により、非同期コンポーネントと Webpack の LazyLoading によってアプリケーションのパフォーマンスをさらに向上させることができます。 Vue は軽量の Java です