Zusammenfassung der Unterschiede und Verwendung von Plugins und Komponenten in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Version Vue 2.9.6, DELL G3-Computer.

1. Was sind Komponenten?

Erinnern Sie sich an die vorherige Definition von Komponenten:

Eine Komponente ist ein Entwicklungsmodell, das verschiedene grafische und nicht grafische Logik in ein einheitliches Konzept (Komponente) abstrahiert. In Vue kann jede .vue-Datei als Komponente betrachtet werden.

Vorteile von Komponenten

• Reduzieren Sie die Kopplung des gesamten Systems. Während die Schnittstelle unverändert bleibt, können wir verschiedene Komponenten ersetzen, um die Anforderungen schnell zu erfüllen. Beispielsweise kann das Eingabefeld für eine spezifische Implementierung durch Kalender, Uhrzeit, Bereich und andere Komponenten ersetzt werden.
• Einfaches Debuggen. Da das gesamte System aus Komponenten besteht, können Sie bei Auftreten eines Problems die Komponente mit der Eliminierungsmethode direkt entfernen oder das Problem anhand der Komponente, die den Fehler meldet, schnell lokalisieren. Der Grund für die schnelle Lokalisierung liegt darin, dass jede Komponente lose gekoppelt ist und eine einzelne Verantwortung hat, sodass die Logik einfacher ist als bei der Analyse des gesamten Systems.
• Verbesserte Wartbarkeit. Da jede Komponente eine einzelne Verantwortung hat und Komponenten im System wiederverwendet werden, kann durch die Optimierung des Codes eine allgemeine Verbesserung des Systems erreicht werden.

2. Was ist ein Plug-in?

Plugins werden häufig verwendet, um Vue globale Funktionen hinzuzufügen. Dem Funktionsumfang von Plugins sind keine strengen Grenzen gesetzt. Im Allgemeinen lassen sie sich in die folgenden Kategorien einteilen:

• Fügen Sie globale Methoden oder Eigenschaften hinzu. Wie zum Beispiel: vue-custom-element
• Fügen Sie globale Ressourcen hinzu: Anweisungen/Filter/Übergänge usw. Wie Vue-Touch
• Fügen Sie einige Komponentenoptionen über globale Mixins hinzu. Wie zum Beispiel vue-router
• Fügen Sie Vue-Instanzmethoden hinzu, indem Sie sie zu Vue.prototype hinzufügen.
  
• Eine Bibliothek, die eine eigene API bereitstellt und eine oder mehrere der oben genannten Funktionen bietet. Wie zum Beispiel vue-router
  

3. Der Unterschied zwischen den beiden

Die Unterschiede zwischen beiden spiegeln sich hauptsächlich in den folgenden Aspekten wider:

• Schreibformat
• Anmeldeformular
• Anwendungsszenarien

Schreibformat

Komponenten schreiben

Es gibt viele Möglichkeiten, eine Komponente zu schreiben. Die gebräuchlichste ist das Vue-Einzeldateiformat. Jede VUE-Datei kann als Komponente betrachtet werden.

VUE-Dateistandardformat

<Vorlage>
</Vorlage>
<Skript>
Standard exportieren{ 
    ...
}
</Skript>
<Stil>
</Stil>

Wir können eine Komponente auch über das Vorlagenattribut schreiben. Wenn der Komponenteninhalt groß ist, können wir den Inhalt der Vorlagenkomponente extern definieren. Wenn der Komponenteninhalt nicht groß ist, können wir ihn direkt in das Vorlagenattribut schreiben.

<template id="testComponent"> // Inhalt der Komponentenanzeige <div>Komponente!</div>   
</Vorlage>
 
Vue.Komponente('KomponenteA',{ 
    Vorlage: „#testComponent“  
    Vorlage: `<div>Komponente</div>` // Dieses Format kann für Komponenten mit wenig Inhalt verwendet werden})

Plugins schreiben

Vue-Plugin-Implementierungen sollten eine Installationsmethode verfügbar machen. Der erste Parameter dieser Methode ist der Vue-Konstruktor und der zweite Parameter ist ein optionales Optionsobjekt.

MyPlugin.install = Funktion (Vue, Optionen) {
  // 1\. Globale Methode oder Eigenschaft hinzufügen
  Vue.myGlobalMethod = Funktion () {
    // Logik...
  }
 
  // 2\. Globale Ressourcen hinzufügen Vue.directive('my-directive', {
    bind (el, binden, vnode, alterVnode) {
      // Logik...
    }
    ...
  })
 
  // 3\. Komponentenoptionen einfügen Vue.mixin({
    erstellt: Funktion () {
      // Logik...
    }
    ...
  })
 
  // 4\. Instanzmethode hinzufügen Vue.prototype.$myMethod = function (methodOptions) {
    // Logik...
  }
}

Anmeldeformular

Komponentenregistrierung

Die Vue-Komponentenregistrierung ist hauptsächlich in eine globale Registrierung und eine lokale Registrierung unterteilt

Die globale Registrierung erfolgt über die Vue.component-Methode. Der erste Parameter ist der Name der Komponente und der zweite Parameter ist das übergebene Konfigurationselement.

Vue.component('mein-Komponentenname', { /* ... */ })

Bei der lokalen Registrierung muss eine Komponente nur über die Komponenteneigenschaft registriert werden, wo sie verwendet wird.

const component1 = {...} // definiere eine Komponente export default {
    Komponenten: {
        Komponente1 // lokale Registrierung}}

Plugin-Registrierung

Das Plugin wird über Vue.use() registriert (installiert). Der erste Parameter ist der Name des Plugins und der zweite Parameter ist ein optionales Konfigurationselement.

Vue.use(Pluginname, { /* ... */} )

Beachten Sie, dass:

Wenn Sie ein Plugin registrieren, müssen Sie dies tun, bevor Sie new Vue() aufrufen, um die Anwendung zu starten.

Vue.use verhindert automatisch mehrere Registrierungen desselben Plugins und registriert es nur einmal

Anwendungsszenarien

Die Einzelheiten wurden im Abschnitt „Was sind Plugins?“ beschrieben, daher fassen wir sie hier zusammen.

Die Komponente wird verwendet, um das Geschäftsmodul Ihrer App zu bilden. Ihr Ziel ist App.vue

Plugins sind funktionale Module, die Ihren Technologie-Stack erweitern. Ihr Ziel ist Vue selbst.

Einfach ausgedrückt ist ein Plugin eine Erweiterung oder Ergänzung der Funktionalität von Vue.

Damit ist dieser Artikel über die Unterschiede und die Verwendungsübersicht von Plugins und Komponenten in Vue abgeschlossen. Weitere Informationen zu den Unterschieden zwischen Plugins und Komponenten in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!