Vue には非同期コンポーネントの例があります
必要なコンポーネントを使用するときにのみロードすると、初めてページをロードする速度が効果的に向上することは誰もが知っています。たとえば、ルートを切り替える場合、次の記事では主に簡単な 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 === '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>
<p id="app" style="font-size: 22px">
<!-- 异步组件async-comp -->
<async-comp :list="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"></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: '\
<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 {
/** 要渲染的异步组件，必须是一个Promise对象 */
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>'
},
/* 出现错误时显示的组件 */
error: {
template: '\
<p style="color:red;">load failed!</p>\
'
},
/* loading组件的延迟时间 */
delay: 10,
/* 最长等待时间，如果超过此时间，将显示error组件。 */
timeout:3200
}
}
}
} )以上、皆様のお役に立てれば幸いです。
関連記事:
以上がVue には非同期コンポーネントの例がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1663
14
1420
52
1313
25
1266
29
1238
24
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 の非同期コンポーネントと Webpack コード分割を使用してアプリケーションのパフォーマンスを向上させる方法
Jul 17, 2023 pm 09:21 PM
Vue の非同期コンポーネントと WebpackCodeSplitting を使用してアプリケーションのパフォーマンスを向上させる方法 はじめに: Web アプリケーションがますます複雑になるにつれて、ページの読み込み速度とパフォーマンスが開発者の焦点になっています。アプリケーションのパフォーマンスを向上させるために、Vue の非同期コンポーネントと Webpack の CodeSplitting 機能を利用できます。これら 2 つの機能を組み合わせることで、ページの読み込み時間を短縮し、ユーザー エクスペリエンスを向上させることができます。この記事では、Vue の非同期コンポーネントと Web の使用方法を紹介します。
Vue が非同期コンポーネントを使用するのはなぜですか?
Dec 13, 2022 pm 07:11 PM
非同期コンポーネントを使用する理由: 1. 非同期コンポーネントは、パッケージング結果を削減し、非同期コンポーネントを個別にパッケージ化し、コンポーネントを非同期的にロードすることができるため、大きすぎるコンポーネントの問題を効果的に解決できます。 2. 非同期コンポーネントのコアは関数として定義でき、関数内でインポート構文を使用してファイルの分割ロードを実現できます。
Vue2 と Vue3 で 404 インターフェイスを設定する方法について話しましょう
Feb 17, 2023 pm 02:25 PM
この記事では、Vue の学習について説明し、Vue2 および Vue3 で 404 インターフェイスを設定する方法について説明します。
vue2 がダンピングを備えたプルダウン読み込み関数を実装する方法については、記事で詳しく説明しています。
Feb 20, 2023 pm 12:07 PM
この記事では、vue2 に関する関連知識を紹介します。主に、vue2 でのダンプ プルダウン ローディングの機能がどのように実装されているかについて説明します。興味のある友人は一緒に見てください。皆さんのお役に立てれば幸いです。役に立ちます。
Vue の非同期コンポーネントと Webpack の遅延読み込みを通じてアプリケーションのパフォーマンスを向上させる方法
Jul 18, 2023 pm 04:42 PM
Vue の非同期コンポーネントと Webpack の LazyLoading を通じてアプリケーションのパフォーマンスを向上させる方法 インターネット テクノロジの発展に伴い、Web アプリケーションのパフォーマンスの最適化が常に開発者の焦点となってきました。これまで、Web アプリケーションのパフォーマンスの最適化は、主にフロントエンド リソースの削減とバックエンド インターフェイスの最適化に重点が置かれていました。ただし、Vue.js の人気により、非同期コンポーネントと Webpack の LazyLoading によってアプリケーションのパフォーマンスをさらに向上させることができます。 Vue は軽量の Java です
