Es gibt Beispiele für asynchrone Komponenten in Vue
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 === '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>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: '\
<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
}
}
}
} )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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Was ist der Unterschied zwischen der Ausführungsreihenfolge des Lebenszyklus in vue2 und vue3?
May 16, 2023 pm 09:40 PM
Unterschiede in der Ausführungsreihenfolge des Lebenszyklus zwischen vue2 und vue3 Vergleich der Lebenszyklen Die Ausführungsreihenfolge in vue2 beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed Die Ausführungsreihenfolge in vue3 setup=>onBeforeMount= >onMounted=> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g
Verstehen Sie schnell den Vue2-Diff-Algorithmus (detaillierte grafische Erklärung)
Mar 17, 2023 pm 08:23 PM
Der Diff-Algorithmus ist ein effizienter Algorithmus, der Baumknoten auf derselben Ebene vergleicht und so die Notwendigkeit vermeidet, den Baum Schicht für Schicht zu durchsuchen und zu durchlaufen. Wie viel wissen Sie über den Diff-Algorithmus? Der folgende Artikel wird Ihnen eine ausführliche Analyse des Diff-Algorithmus von vue2 geben. Ich hoffe, er wird Ihnen hilfreich sein!
Grundlagen der VUE3-Entwicklung: Tutorial zur Verwendung asynchroner Komponenten
Jun 15, 2023 pm 11:33 PM
Vue3 ist die neueste Hauptversion von Vue.js und verfügt im Vergleich zu Vue2 über viele neue Funktionen und Verbesserungen. Eine der herausragendsten Verbesserungen ist die Verwendung asynchroner Komponenten. In diesem Artikel befassen wir uns mit der Verwendung und den Techniken asynchroner Komponenten in Vue3. Was sind asynchrone Komponenten? In Vue können Komponenten über die Importanweisung oder die Require-Funktion eingeführt werden. Diese Komponenten werden als synchrone Komponenten bezeichnet und ihr Code wird sofort beim Start der Anwendung geladen und kompiliert. Allerdings wird die Anwendung immer größer
Warum verwendet Vue asynchrone Komponenten?
Dec 13, 2022 pm 07:11 PM
Gründe für die Verwendung asynchroner Komponenten: 1. Asynchrone Komponenten können die Verpackungsergebnisse reduzieren, asynchrone Komponenten separat verpacken und Komponenten asynchron laden, wodurch das Problem einer zu großen Komponente effektiv gelöst werden kann. 2. Der Kern der asynchronen Komponente kann als Funktion definiert werden, und die Importsyntax kann in der Funktion verwendet werden, um das geteilte Laden von Dateien zu realisieren.
So nutzen Sie die asynchronen Komponenten von Vue und die Webpack-Codeaufteilung, um die Anwendungsleistung zu verbessern
Jul 17, 2023 pm 09:21 PM
So verwenden Sie die asynchronen Komponenten von Vue und WebpackCodeSplitting, um die Anwendungsleistung zu verbessern. Einführung: Da Webanwendungen immer komplexer werden, sind Seitenladegeschwindigkeit und Leistung in den Fokus der Entwickler gerückt. Um die Leistung der Anwendung zu verbessern, können wir die asynchronen Komponenten von Vue und die CodeSplitting-Funktion von Webpack nutzen. Die Kombination dieser beiden Funktionen kann uns helfen, die Ladezeit der Seite zu verkürzen und die Benutzererfahrung zu verbessern. In diesem Artikel wird erläutert, wie Sie die asynchronen Komponenten von Vue und das Web verwenden
Lassen Sie uns darüber sprechen, wie Sie die 404-Schnittstelle in Vue2 und Vue3 einrichten
Feb 17, 2023 pm 02:25 PM
Dieser Artikel führt Sie durch das Vue-Lernen und erläutert, wie Sie die 404-Schnittstelle in Vue2 und Vue3 einrichten. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verbessern Sie die Anwendungsleistung durch die asynchronen Komponenten von Vue und Lazy Loading von Webpack
Jul 18, 2023 pm 04:42 PM
So verbessern Sie die Anwendungsleistung durch die asynchronen Komponenten von Vue und LazyLoading von Webpack. Mit der Entwicklung der Internet-Technologie stand die Leistungsoptimierung von Webanwendungen immer im Fokus der Entwickler. In der Vergangenheit konzentrierte sich die Leistungsoptimierung für Webanwendungen hauptsächlich auf die Reduzierung von Front-End-Ressourcen und die Optimierung von Back-End-Schnittstellen. Mit der Beliebtheit von Vue.js kann die Anwendungsleistung jedoch durch asynchrone Komponenten und LazyLoading von Webpack weiter verbessert werden. Vue ist ein leichtes Java
In einem Artikel wird ausführlich erläutert, wie vue2 die Pull-Down-Ladefunktion mit Dämpfung implementiert
Feb 20, 2023 pm 12:07 PM
Dieser Artikel vermittelt Ihnen relevantes Wissen über vue2. Es geht hauptsächlich darum, wie die Funktion des gedämpften Pulldowns in vue2 implementiert wird. Ich hoffe, dass es für alle hilfreich ist.
