Wie funktionieren die dynamischen Komponenten von Vue3?

In diesem Artikel stellt Abaoge die in Vue 3 integrierte Komponente vor – Komponente, die verwendet wird, um eine „Metakomponente“ als dynamische Komponente darzustellen. Es macht nichts, wenn Sie nicht viel über dynamische Komponenten wissen. In diesem Artikel stellt Bruder Abao die Anwendung dynamischer Komponenten anhand konkreter Beispiele vor. Da zwischen der internen Struktur dynamischer Komponenten und der Komponentenregistrierung ein gewisser Zusammenhang besteht, wird Abao zunächst die relevanten Kenntnisse zur Komponentenregistrierung vorstellen, damit jeder die internen Prinzipien dynamischer Komponenten besser verstehen kann.

1. Komponentenregistrierung

1.1 Globale Registrierung

In Vue 3.0 ist es einfach, globale Komponenten mithilfe der Komponentenmethode des App-Objekts zu registrieren oder abzurufen. Die Komponentenmethode unterstützt zwei Parameter:

• Name: Komponentenname;
• Komponente: Komponentendefinitionsobjekt.
  

Schauen wir uns als Nächstes ein einfaches Beispiel an:

<div id="app">
 <Komponente-a></Komponente-a>
 <Komponente-b></Komponente-b>
 <Komponente-c></Komponente-c>
</div>
<Skript>
 const { createApp } = Vue
 const app = createApp({}); // ①
 app.component('component-a', { // ②
  Vorlage: "<p>Ich bin Komponente A</p>"
 });
 app.component('Komponente-b', {
  Vorlage: "<p>Ich bin Komponente B</p>"
 });
 app.component('komponente-c', {
  Vorlage: "<p>Ich bin Komponente C</p>"
 });
 app.mount('#app') // ③
</Skript>

Im obigen Code haben wir drei Komponenten über die Methode app.component registriert. Diese Komponenten sind global registriert. Das bedeutet, dass sie nach der Registrierung in der Vorlage jeder neu erstellten Komponenteninstanz verwendet werden können. Der Code dieses Beispiels ist relativ einfach und umfasst hauptsächlich drei Schritte: Erstellen eines App-Objekts, Registrieren globaler Komponenten und Mounten der Anwendung. Die Details zum Erstellen des App-Objekts werden in nachfolgenden Artikeln separat vorgestellt. Im Folgenden konzentrieren wir uns auf die Analyse der anderen beiden Schritte. Analysieren wir zunächst den Prozess der Registrierung globaler Komponenten.

1.2 Der Prozess der Registrierung globaler Komponenten

Im obigen Beispiel verwenden wir die Komponentenmethode des App-Objekts, um eine globale Komponente zu registrieren:

app.component('komponente-a', {
 Vorlage: "<p>Ich bin Komponente A</p>"
});

Natürlich können wir neben der Registrierung globaler Komponenten auch lokale Komponenten registrieren, da die Komponente auch eine Komponentenoption akzeptiert:

const app = Vue.createApp({
 Komponenten:
 'Komponente-a': KomponenteA,
 'Komponente-b': KomponenteB
 }
})

Es ist zu beachten, dass lokal registrierte Komponenten in ihren untergeordneten Komponenten nicht verfügbar sind. Fahren wir als Nächstes mit der Registrierung globaler Komponenten fort. Für die vorherigen Beispiele haben wir die Methode app.component verwendet, die in der Datei runtime-core/src/apiCreateApp.ts definiert ist:

Exportfunktion createAppAPI<HostElement>(
 rendern: RootRenderFunction,
 hydratisieren?: RootHydrateFunction
): CreateAppFunction<HostElement> {
 Rückgabefunktion createApp(rootComponent, rootProps = null) {
 const Kontext = erstelleAppContext()
 const installiertePlugins = neues Set()
 let isMounted = false

 const app: App = (context.app = {
  // Einige Codekontexte weglassen: Kontext,

  // Globale Komponenten registrieren oder abrufen component(name: string, component?: Component): any {
  wenn (__DEV__) {
   validateComponentName(Name, Kontext.config)
  }
  if (!component) { // Holen Sie sich die Komponente, die dem Namen entspricht return context.components[name]
  }
  if (__DEV__ && context.components[name]) { // Doppelte Registrierungsaufforderung warn(`Komponente "${name}" wurde bereits in der Ziel-App registriert.`)
  }
  context.components[name] = component // Globale Komponente registrieren returniere App
  },
 })

 Rückgabe-App
 }
}

Wenn alle Komponenten erfolgreich registriert sind, werden sie in der Komponenteneigenschaft des Kontextobjekts gespeichert, wie in der folgenden Abbildung dargestellt:

Die Funktion createAppContext ist in der Datei runtime-core/src/apiCreateApp.ts definiert:

// Pakete/Runtime-Core/src/apiCreateApp.ts
Exportfunktion createAppContext(): AppContext {
 zurückkehren {
 app: null wie beliebig,
 config: { // Anwendungskonfigurationsobjekt isNativeTag: NO,
  Leistung: falsch,
  globaleEigenschaften: {},
  optionMergeStrategies: {},
  isCustomElement: NEIN,
  errorHandler: undefiniert,
  warnHandler: nicht definiert
 },
 mixins: [], // Speichert die eingemischten Komponenten in der Anwendung components: {}, // Speichert die Informationen der globalen Komponenten directives: {}, // Speichert die Informationen der globalen Anweisungen provide: Object.create(null)
 }
}

Glauben Sie nach der Analyse der app.component-Methode, dass der Komponentenregistrierungsprozess recht einfach ist? Wann werden die registrierten Komponenten verwendet? Um diese Frage zu beantworten, müssen wir einen weiteren Schritt analysieren – die Anwendungsmontage.

1.3 Anwendungsmontageprozess

Um den Installationsprozess der Anwendung intuitiver zu verstehen, verwendete Abaoge die Registerkarte „Leistung“ der Chrome-Entwicklertools, um den Hauptprozess der Anwendungsinstallation aufzuzeichnen:

In der obigen Abbildung haben wir eine komponentenbezogene Funktion „resolveComponent“ gefunden. Offensichtlich wird diese Funktion zum Parsen der Komponente verwendet und in der Rendermethode aufgerufen. Im Quellcode fanden wir die Definition der Funktion:

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
const COMPONENTS = "Komponenten"

Exportfunktion resolveComponent(Name: Zeichenfolge): ConcreteComponent | Zeichenfolge {
 returniere resolveAsset(KOMPONENTEN, Name) || Name
}

Aus dem obigen Code können wir erkennen, dass innerhalb der Funktion „resolveComponent“ weiterhin die Funktion „resolveAsset“ aufgerufen wird, um bestimmte Auflösungsvorgänge auszuführen. Bevor wir die spezifische Implementierung der Funktion „resolveAsset“ analysieren, fügen wir einen Haltepunkt innerhalb der Funktion „resolveComponent“ hinzu, um einen Blick auf die Rendermethode zu werfen:

In der obigen Abbildung sehen wir den Vorgang zum Auflösen von Komponenten, etwa _resolveComponent("component-a"). Wie wir bereits wissen, wird die Funktion „resolveAsset“ innerhalb der Funktion „resolveComponent“ aufgerufen. Die konkrete Implementierung dieser Funktion lautet wie folgt:

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
Funktion „resolveAsset“ (
 Typ: Typ der KOMPONENTEN | Typ der RICHTLINIEN,
 Name: Zeichenfolge,
 warnMissing = true
) {
 const Instanz = aktuelleRenderingInstance || aktuelleInstanz
 wenn (Instanz) {
 const Komponente = Instanz.Typ
 // Den größten Teil der Verarbeitungslogik weglassen const res =
  // Lokale Registrierung // Überprüfen Sie zuerst die Instanz [Typ] für Komponenten mit Mixin oder Erweiterungen.
  Auflösen(Instanz[Typ] || (Komponente als Komponentenoptionen)[Typ], Name) ||
  // Globale Registrierung auflösen (instance.appContext[Typ], Name)
 Rückgabewert
 } sonst wenn (__DEV__) {
 warnen(
  `auflösen${capitalize(type.slice(0, -1))} ` +
  `kann nur in render() oder setup() verwendet werden.`
 )
 }
}

Da beim Registrieren von Komponenten die globale Registrierungsmethode verwendet wird, führt der Auflösungsprozess die Anweisung „resolve(instance.appContext[type], name)“ aus, wobei die „resolve“-Methode wie folgt definiert ist:

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
Funktion auflösen(Registrierung: Datensatz<Zeichenfolge, beliebig> | undefiniert, Name: Zeichenfolge) {
 zurückkehren (
 Registrierung &&
 (Registrierung[Name] ||
  Registrierung[Camelize(Name)] ||
  Registrierung [Großschreibung (Camelize (Name))])
 )
}

Nachdem wir den obigen Verarbeitungsfluss analysiert haben, erhalten wir beim Parsen der global registrierten Komponenten die registrierten Komponentenobjekte über die Resolve-Funktion aus dem Anwendungskontextobjekt.

(Funktion anonym() {
 const _Vue = Vue

 Rückgabefunktion rendern(_ctx, _cache) {
  mit (_ctx) {
   const {resolveComponent: _resolveComponent, createVNode: _createVNode, 
   Fragment: _Fragment, Block öffnen: _openBlock, Block erstellen: _createBlock} = _Vue

   const _component_component_a = _resolveComponent("Komponente-a")
   const _component_component_b = _resolveComponent("Komponente-b")
   const _component_component_c = _resolveComponent("Komponente-c")

   zurückgeben (_openBlock(),
   _createBlock(_Fragment, null, [
    _createVNode(_Komponente_Komponente_a), 
    _createVNode(_component_component_b), 
    _createVNode(_component_component_c)], 64))
  }
 }
})

Nach dem Abrufen der Komponente wird über die Funktion _createVNode ein VNode-Knoten erstellt. Ich werde jedoch nicht näher darauf eingehen, wie VNode in ein echtes DOM-Element gerendert wird. Ich werde später einen separaten Artikel schreiben, um diesen Inhalt vorzustellen. Als Nächstes werden wir den relevanten Inhalt dynamischer Komponenten vorstellen.

2. Dynamische Komponenten

In Vue 3 steht uns eine integrierte Komponente zur Verfügung, die eine „Metakomponente“ als dynamische Komponente rendern kann. Abhängig vom Wert von is wird bestimmt, welche Komponente gerendert wird. Wenn der Wert eine Zeichenfolge ist, kann es sich entweder um einen HTML-Tag-Namen oder einen Komponentennamen handeln. Die entsprechenden Anwendungsbeispiele lauten wie folgt:

<!-- Dynamische Komponenten werden durch die Eigenschaft „componentId“ der VM-Instanz gesteuert -->
<Komponente: ist = "Komponenten-ID"></Komponente>

<!-- Kann auch registrierte Komponenten oder von Props übergebene Komponenten rendern-->
<Komponente: ist = "$options.components.child"></Komponente>

<!-- Sie können Komponenten über Zeichenfolgen referenzieren -->
<Komponente: ist = "Bedingung? 'FooComponent': 'BarComponent'"></Komponente>

<!-- Kann zum Rendern nativer HTML-Elemente verwendet werden -->
<Komponente: ist = "href? 'a': 'span'"></Komponente>

2.1 Bindungszeichenfolgentyp

Nachdem wir die in die Komponente integrierten Komponenten vorgestellt haben, sehen wir uns nun ein einfaches Beispiel an:

<div id="app">
 <Schaltfläche
  v-for="Tabulator in Tabulatoren"
  :Taste="Tabulator"
  @click="currentTab = 'tab-' + tab.toLowerCase()">
  {{ tab }}
 </button>
 <Komponente: ist = "currentTab"></Komponente>
</div>
<Skript>
 const { createApp } = Vue
 const tabs = ['Home', 'Mein']
 const app = erstelleApp({
  Daten() {
  zurückkehren {
   Registerkarten,
   currentTab: 'tab-' + tabs[0].toLowerCase()
  }
  },
 });
 app.component('tab-home', {
  Vorlage: `<div style="border: 1px solid;">Home-Komponente</div>`
 })
 app.component('tab-my', {
  Vorlage: `<div style="border: 1px solid;">Meine Komponente</div>`
 })
 app.mount('#app')
</Skript>

Im obigen Code haben wir zwei Komponenten, tab-home und tab-my, global über die Methode app.component registriert. Darüber hinaus verwenden wir in der Vorlage die integrierte Komponente, deren Eigenschaft „is“ an die Eigenschaft „currentTab“ des Datenobjekts gebunden ist, bei dem es sich um einen Zeichenfolgentyp handelt. Wenn der Benutzer auf die Tabulatortaste klickt, wird der Wert von currentTab dynamisch aktualisiert, wodurch die Funktion zum dynamischen Umschalten von Komponenten realisiert wird. Das Ergebnis des erfolgreichen Ausführens des obigen Beispiels wird in der folgenden Abbildung dargestellt:

Glauben Sie nach der Lektüre, dass die integrierte Komponente magisch ist? Wenn Sie interessiert sind, folgen Sie Bruder Abao weiter, um die Geheimnisse dahinter aufzudecken. Als Nächstes verwenden wir das Onlinetool Vue 3 Template Explorer, um das Ergebnis der Kompilierung der Vorlage <component :is="currentTab"></component> anzusehen:

const _Vue = Vue

Rückgabefunktion rendern(_ctx, _cache, $props, $setup, $data, $options) {
 mit (_ctx) {
 const { resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock, 
  Block erstellen: _createBlock } = _Vue
 Rückgabe (_openBlock(), _createBlock(_resolveDynamicComponent(currentTab)))
 }
}

Durch Beobachtung der generierten Rendering-Funktion haben wir eine Funktion „resolveDynamicComponent“ gefunden. Anhand des Namens der Funktion können wir erkennen, dass sie zum Auflösen dynamischer Komponenten verwendet wird. Sie ist in der Datei runtime-core/src/helpers/resolveAssets.ts definiert. Die konkrete Implementierung lautet wie folgt:

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
Exportfunktion resolveDynamicComponent(Komponente: unbekannt): VNodeTypes {
 wenn (istString(Komponente)) {
 returniere resolveAsset(KOMPONENTEN, Komponente, false) || Komponente
 } anders {
 // Ungültige Typen führen zum Durchfallen an createVNode und geben eine Warnung aus
 returniere (Komponente || NULL_DYNAMIC_COMPONENT) als beliebige
 }
}

Wenn der Komponentenparameter in der Funktion „solveDynamicComponent“ ein Zeichenfolgentyp ist, wird die zuvor eingeführte Methode „solveAsset“ aufgerufen, um die Komponente aufzulösen:

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
Funktion „resolveAsset“ (
 Typ: Typ der KOMPONENTEN | Typ der RICHTLINIEN,
 Name: Zeichenfolge,
 warnMissing = true
) {
 const Instanz = aktuelleRenderingInstance || aktuelleInstanz
 wenn (Instanz) {
 const Komponente = Instanz.Typ
 // Den größten Teil der Verarbeitungslogik weglassen const res =
  // Lokale Registrierung // Überprüfen Sie zuerst die Instanz [Typ] für Komponenten mit Mixin oder Erweiterungen.
  Auflösen(Instanz[Typ] || (Komponente als Komponentenoptionen)[Typ], Name) ||
  // Globale Registrierung auflösen (instance.appContext[Typ], Name)
 Rückgabewert
 }
}

Für das vorherige Beispiel wird die Komponente global registriert, sodass die entsprechende Komponente während des Auflösungsprozesses aus der Komponenteneigenschaft des Kontextobjekts app.context abgerufen wird. Wenn sich currentTab ändert, gibt die Funktion resolveAsset eine andere Komponente zurück und realisiert so die Funktionalität dynamischer Komponenten. Wenn die Funktion „resolveAsset“ die entsprechende Komponente nicht abrufen kann, gibt sie außerdem den Wert des aktuellen Komponentenparameters zurück. Beispielsweise gibt resolveDynamicComponent('div') die Zeichenfolge „div“ zurück.

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
export const NULL_DYNAMIC_COMPONENT = Symbol()

Exportfunktion resolveDynamicComponent(Komponente: unbekannt): VNodeTypes {
 wenn (istString(Komponente)) {
 returniere resolveAsset(KOMPONENTEN, Komponente, false) || Komponente
 } anders {
 returniere (Komponente || NULL_DYNAMIC_COMPONENT) als beliebige
 }
}

Aufmerksame Freunde haben möglicherweise bemerkt, dass innerhalb der Funktion resolveDynamicComponent, wenn der Komponentenparameter kein Zeichenfolgentyp ist, das Ausführungsergebnis der Anweisungskomponente || NULL_DYNAMIC_COMPONENT zurückgegeben wird, wobei der Wert von NULL_DYNAMIC_COMPONENT ein Symbolobjekt ist.

2.2 Bindungsobjekttyp

Nachdem wir den obigen Inhalt verstanden haben, implementieren wir die vorherige dynamische Tab-Funktion erneut:

<div id="app">
 <Schaltfläche
  v-for="Tabulator in Tabulatoren"
  :Taste="Tabulator"
  @click="aktuelleTab = Tab">
  {{ tab.name }}
 </button>
 <Komponente: ist = "currentTab.component"></Komponente>
</div>
<Skript>
 const { createApp } = Vue
 Konstante Tabs = [
  {
  Name: "Home",
  Komponente: {
   Vorlage: `<div style="border: 1px solid;">Home-Komponente</div>`
  }
  },
  {
  Name: "Mein",
  Komponente: {
   Vorlage: `<div style="border: 1px solid;">Meine Komponente</div>`
  }
 }]
 const app = erstelleApp({
  Daten() {
  zurückkehren {
   Registerkarten,
   aktuelleTab: Tabs[0]
  }
  },
 });
 app.mount('#app')
</Skript>

Im obigen Beispiel ist die Eigenschaft „is“ der integrierten Komponente an die Komponenteneigenschaft des currentTab-Objekts gebunden, dessen Wert ein Objekt ist. Wenn der Benutzer auf die Tabulatortaste klickt, wird der Wert von currentTab dynamisch aktualisiert, wodurch sich auch der Wert von currentTab.component ändert. Dadurch wird die Funktion des dynamischen Wechselns von Komponenten erreicht. Dabei ist zu beachten, dass die dynamische Komponente bei jedem Umschalten neu erstellt wird. In einigen Szenarien möchten Sie jedoch möglicherweise den Status dieser Komponenten beibehalten, um Leistungsprobleme durch wiederholtes erneutes Rendern zu vermeiden.

Für dieses Problem können wir eine andere integrierte Komponente von Vue 3, Keep-Alive, verwenden, um die dynamischen Komponenten zu umschließen. Zum Beispiel:

<am Leben erhalten>
 <Komponente: ist = "aktuellerTab"></Komponente>
</am Leben erhalten> 

Der Hauptzweck der integrierten Keep-Alive-Komponente besteht darin, den Komponentenstatus beizubehalten oder ein erneutes Rendern zu vermeiden. Wenn sie zum Umschließen dynamischer Komponenten verwendet wird, werden inaktive Komponenteninstanzen zwischengespeichert, anstatt zerstört zu werden. In Bezug auf das interne Arbeitsprinzip der Keep-Alive-Komponente wird Abaoge später einen speziellen Artikel schreiben, um es zu analysieren. Freunde, die sich dafür interessieren, denken Sie daran, auf die erweiterte Vue 3.0-Serie zu achten.

3. Bruder Abao hat etwas zu sagen

3.1 Welche weiteren Einbaukomponenten gibt es neben der Komponente Einbaukomponente?

Zusätzlich zu den in diesem Artikel vorgestellten integrierten Komponenten und Keep-Alive-Komponenten bietet Vue 3 auch integrierte Komponenten für Übergänge, Übergangsgruppen, Slots und Teleports.

3.2 Was ist der Unterschied zwischen der Registrierung globaler und lokaler Komponenten?

Globale Komponenten registrieren

const { createApp, h } = Vue
const app = createApp({});
app.component('komponente-a', {
 Vorlage: "<p>Ich bin Komponente A</p>"
});

Mit der Methode app.component registrierte globale Komponenten werden im Kontextobjekt des App-Anwendungsobjekts gespeichert. In der Komponenteninstanz werden die über die Komponenteneigenschaft des Komponentenobjekts registrierten lokalen Komponenten gespeichert.

Lokale Komponenten registrieren

const { createApp, h } = Vue
const app = createApp({});
const componentA = () => h('div', 'Ich bin Komponente A');
app.component('Komponente-b', {
 Komponenten:
 'Komponente-a': KomponenteA
 },
 Vorlage: `<div>
 Ich bin Komponente B, die intern Komponente A verwendet
 <Komponente-a></Komponente-a> 
 </div>`
})

Auflösen global und lokal registrierter Komponenten

// Pakete/Laufzeit-Kern/src/helpers/resolveAssets.ts
Funktion „resolveAsset“ (
 Typ: Typ der KOMPONENTEN | Typ der RICHTLINIEN,
 Name: Zeichenfolge,
 warnMissing = true
) {
 const Instanz = aktuelleRenderingInstance || aktuelleInstanz
 wenn (Instanz) {
 const Komponente = Instanz.Typ
 // Den größten Teil der Verarbeitungslogik weglassen const res =
  // Lokale Registrierung // Überprüfen Sie zuerst die Instanz [Typ] für Komponenten mit Mixin oder Erweiterungen.
  Auflösen(Instanz[Typ] || (Komponente als Komponentenoptionen)[Typ], Name) ||
  // Globale Registrierung auflösen (instance.appContext[Typ], Name)
 Rückgabewert
 }
}

3.3 Können dynamische Komponenten andere Eigenschaften binden?

Neben der Unterstützung von IS-Bindungen unterstützen die in die Komponente integrierten Komponenten auch andere Attribut- und Ereignisbindungen:

<Komponente :is="currentTab.component" :name="name" @click="sayHi"></Komponente>

Hier verwendet Abao das Online-Tool Vue 3 Template Explorer, um die obige Vorlage zusammenzustellen:

const _Vue = Vue
Rückgabefunktion rendern(_ctx, _cache, $props, $setup, $data, $options) {
 mit (_ctx) {
 const { resolveDynamicComponent: _resolveDynamicComponent, 
  Block öffnen: _openBlock, Block erstellen: _createBlock } = _Vue

 zurückgeben (_openBlock(), _createBlock(_resolveDynamicComponent(currentTab.component), {
  Name: Name,
  bei Klick: sagHallo
 }, null, 8 /* PROPS */, ["name", "beim Klicken"]))
 }
}

Aus der obigen Rendering-Funktion können wir ersehen, dass mit Ausnahme der is-Bindung, die in den Funktionsaufruf _resolveDynamicComponent umgewandelt wird, andere Attributbindungen normal zum Props-Objekt aufgelöst werden.

Oben finden Sie detaillierte Informationen zur Funktionsweise der dynamischen Komponenten von vue3. Weitere Informationen zu dynamischen Komponenten von vue3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!