Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue

1. Dynamische Komponenten

<!DOCTYPE html>
<html>
<Kopf>
 <meta charset="utf-8">
 <Stil>
		#app {
			Schriftgröße: 0
		}
		.dynamische-Komponente-Demo-Tab-Button {
			Polsterung: 6px 10px;
			Rahmen oben links – Radius: 3px;
			Rahmen oben rechts – Radius: 3px;
			Rand: 1px durchgezogen #ccc;
			Cursor: Zeiger;
			Rand unten: -1px;
			Rand rechts: -1px;
			Hintergrund: #f0f0f0;
		}
		.dynamische-Komponente-Demo-Tab-Button.dynamische-Komponente-Demo-Aktiv {
			Hintergrund: #e0e0e0;
		}
		.dynamic-component-demo-tab-button:hover {
			Hintergrund: #e0e0e0;
		}
		.dynamische-Komponente-Demo-Posts-Tab {
			Anzeige: Flex;					
		}
		.dynamische-Komponente-Demo-Tab {
			Schriftgröße: 1rem;
			Rand: 1px durchgezogen #ccc;
			Polsterung: 10px;
		}
		.dynamische-Komponente-Demo-Beiträge-Seitenleiste {
			maximale Breite: 40vw;
			Rand: 0 !wichtig;
			Polsterung: 0 10px 0 0 !wichtig;
			Listenstiltyp: keiner;
			Rahmen rechts: 1px durchgezogen #ccc;
			Zeilenhöhe: 1,6em;
		}
		.dynamische-Komponente-Demo-Beiträge-Seitenleiste li {
			Leerzeichen: Nowrap;
			Textüberlauf: Auslassungspunkte;
			Überlauf: versteckt;
			Cursor: Zeiger;
		}
		.dynamische-Komponente-demo-aktiv {
			Hintergrund: hellblau;
		}
		.dynamische-Komponente-Demo-Post-Container {
			Polsterung links: 10px;
		}
		.dynamische-Komponente-Demo-Post > :erstes-Kind {
			Rand oben: 0 !wichtig;
			Polsterung oben: 0 !wichtig;
		}
 </Stil>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</Kopf>
<Text>
<div id="app">
	<button v-for="Tabulatortaste in Tabulatoren" Klasse="dynamische-Komponente-Demo-Tabulatortaste" 
		v-bind:Klasse="{'dynamic-component-demo-active': tab === currentTab}" 
		@click="currentTab = tab">{{ tab }}</button>	
	<am Leben erhalten>
		<Komponente v-bind:is="currentTabComponent"></Komponente>
	</am Leben erhalten>
</div>
<Skript>
 Vue.component('tab-posts', {
		Daten: Funktion(){
			zurückkehren {
				Beiträge:
					{id: 1, title: 'Cat Ipsum', content: 'Fortsetzung warte, bis der Sturm vorüber ist, ...'},
					{id: 2, Titel: 'Hipster Ipsum', Inhalt: 'Bushwick Blue Bottle-Szenegänger ...'},
					{id: 3, title: 'Cupcake Ipsum', content: 'Zuckerguss-Dessert-Soufflé ...'},
				],
				ausgewählter Beitrag: null
			}
		},
 Vorlage: `<div class="dynamic-component-demo-posts-tab dynamic-component-demo-tab">
						<ul Klasse="dynamische-Komponente-Demo-Beiträge-Seitenleiste">
							<li v-for="Beitrag in Beiträgen" 
								v-bind:key="post.id" 
								v-on:click="ausgewählterBeitrag = Beitrag" 
								v-bind:class="{'dynamic-component-demo-active': post===selectedPost}">
								{{ post.title }}
							</li>
						</ul>
						<div Klasse="dynamische-Komponente-Demo-Post-Container">
							<div v-if="ausgewählterBeitrag" Klasse="dynamische-Komponente-Demo-Beitrag">
								<h3>{{ ausgewählter Beitrag.Titel }}</h3>
								<div v-html="ausgewählterBeitrag.content"></div>
							</div>
							<starkes v-else>
								Klicken Sie links auf einen Blogtitel, um ihn anzuzeigen.
							</strong>
						</div>
					</div>`
 });
	
	Vue.component('tab-archive', {
		Vorlage: '<div class="dynamic-component-demo-tab">Archivkomponente</div>'
	});

 neuer Vue({
 el: '#app',
		Daten: {
			currentTab: 'Beiträge',
			Registerkarten: ['Beiträge', 'Archiv']
		},
		berechnet: {
			currentTabComponent: Funktion(){
				gibt „Tabulator-“ + this.currentTab.toLowerCase() zurück
			}
		}
 });
</Skript>
</body>
</html>

Durch die Verwendung von Keep-Alive bei dynamischen Komponenten kann der Zustand der Komponente beim Wechseln der Komponente aufrechterhalten werden. Dadurch werden Leistungsprobleme durch wiederholtes Rendern vermieden.

2. Asynchrone Komponenten

Mit Vue können Sie Ihre Komponenten als Factory-Funktion definieren, die Ihre Komponentendefinition asynchron auflöst.

Vue.component('async-example', Funktion (auflösen, ablehnen) {})

Hier können Sie Vue.js – Komponentengrundlagen überprüfen.

Wir verwenden ein mit Webpack gebündeltes Vue-Projekt, um asynchrone Komponenten einzuführen.

<!-- HalloWelt.vue -->
<Vorlage>
 <div>
 <h2 class="title">{{msg}}</h2>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Daten () {
 zurückkehren {
 msg: 'Hallo Vue!'
 }
 }
}
</Skript>

<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 .Titel {
 Polsterung: 5px;
 Farbe: weiß;
 Hintergrund: grau;
 }
</Stil>
<!-- App.vue -->
<Vorlage>
 <div id="app">
 <HalloWelt/>
 </div>
</Vorlage>

<Skript>
importiere HelloWorld aus './components/HelloWorld'

Standard exportieren {
 Name: "App",
 Komponenten:
 Hallo Welt
 }
}
</Skript>

<Stil>
</Stil>

Wir ändern den Inhalt des <script>-Tags von App.vue in:

Standard exportieren {
 Name: "App",
 Komponenten:
 Hallo Welt: () => import('./components/HelloWorld')
 }
}

Dies implementiert die Funktion der App-Komponente, die die HelloWorld-Komponente asynchron lädt.

Wir können das Laden auf Abruf erreichen.

<!-- App.vue -->
<Vorlage>
 <div id="app">
 <button @click="show = true">Tooltip laden</button>
 <div v-if="anzeigen">
 <HalloWelt/>
 </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Daten: () => ({
 anzeigen:false
 }),
 Komponenten:
 Hallo Welt: () => import('./components/HelloWorld')
 }
}
</Skript>

<Stil>
</Stil>

Die asynchrone Komponentenfabrikfunktion kann hier auch ein Objekt im folgenden Format zurückgeben:

const AsyncComponent = () => ({
 // Zu ladende Komponente (sollte ein „Promise“-Objekt sein)
 Komponente: import('./MyComponent.vue'),
 //Komponentenladen, das beim asynchronen Laden von Komponenten verwendet wird: LoadingComponent,
 // Beim Laden der verwendeten Komponente schlägt der Fehler fehl: ErrorComponent,
 // Zeigt die Verzögerungszeit der Komponente während des Ladens an. Der Standardwert ist 200 (Millisekunden)
 Verzögerung: 200,
 // Wenn ein Timeout angegeben ist und die Komponentenladung abläuft,
 //Verwende die Komponente, die verwendet wird, wenn das Laden fehlschlägt. Der Standardwert ist: „Unendlich“.
 Zeitüberschreitung: 3000
})

siehe:

Dynamische Komponenten und asynchrone Komponenten – Vue.js

Das Obige ist der detaillierte Inhalt für ein vertieftes Verständnis der dynamischen und asynchronen Komponenten von Vue. Weitere Informationen zu dynamischen und asynchronen Komponenten von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:

So verwenden Sie die Vue3-Komponente zum asynchronen Laden von Daten Suspense
Vue3.0+vite2 implementiert dynamisches asynchrones Lazy Loading von Komponenten
Vue implementiert On-Demand-Komponentenladen und asynchrone Komponentenfunktionen
Detaillierte Erläuterung der dynamischen und asynchronen Vue-Komponenten
Detaillierte Erläuterung asynchroner Komponenten in der Vue-Komponentenentwicklung

<<: Lösung für das Problem der langsamen Docker-Pull-Image-Geschwindigkeit

>>: So migrieren Sie MySQL-Daten richtig nach Oracle

Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue

1. Dynamische Komponenten

2. Asynchrone Komponenten

siehe:

Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet

Miniprogramm zur Implementierung des kompletten Einkaufswagens

Antworten auf mehrere häufig gestellte MySQL-Interviewfragen

CSS3 realisiert verschiedene grafische Effekte kleiner Pfeile

Die Prinzipien und Mängel der MySQL-Volltextindizierung

MySQL 8.0.11 Installations-Tutorial unter Windows

Demo für 10-Farbverlaufshintergrund des CSS-Containers (linear-gradient())

Der gesamte Prozess der Installation von mysql5.7.22 unter der ARM64-Architektur

UDP DUP-Timeout UPD-Portstatus-Erkennungscodebeispiel

So kapseln Sie Paging-Komponenten manuell in Vue3.0

Artikel empfehlen

Nginx beschränkt den IP-Zugriff auf bestimmte Seiten

Verwendung von „align-content“ im Zeilenumbruchbereich des Flex-Layouts

jQuery implementiert das Bouncing-Ball-Spiel

Implementierungscode der HTML-Floating-Promptbox-Funktion

So erstellen Sie ein php-nginx-alpine-Image von Grund auf in Docker

jQuery zum Erreichen des Sperrfeuereffekts

Detaillierte Schritte zur Installation von Nginx unter Linux

So ändern Sie Farben und Designs in Vim unter Linux

Tutorial zur Installation von Docker im Windows 10-Subsystem Ubuntu (WSL) (mit Bildern und Text)

Größe von PNG-Bildern mit CSS-Maske deutlich optimieren (empfohlen)

Grundlegendes zur CSS-Eigenschaft „transform-origin“

Analyse von Beispielen für gemeinsame Abfragevorgänge bei MySQL für mehrere Tabellen

Zusammenfassung der Verwendung von setTimeout() in JavaScript

So lösen Sie das Problem, dass Tomcat9.exe abstürzt

Detaillierte Erklärung zur Verbindung von Java mit Mysql Version 8.0.18