Detailliertes Verständnis des Plug-In-Mechanismus und der Installationsdetails von Vue

Vorwort:

Wenn wir Vue verwenden, verwenden und schreiben wir häufig einige benutzerdefinierte Plug-Ins und führen sie dann mit Vue.use ein. Wenn es um das Schreiben von Plug-Ins geht, ist die install von entscheidender Bedeutung. Vue.js -Plugins sollten eine „ install -Methode bereitstellen. Das erste Argument dieser Methode ist der Vue-Konstruktor und das zweite Argument ist ein optionales Optionsobjekt. Dies ist die offizielle Spezifikation Vue für Vue-Plugins. Was genau ist also diese install , wofür verwendet Vue sie genau intern und wie wird sie aufgerufen? Heute werde ich es Ihnen auf Quellcodeebene klar erklären.

Nach dem Lesen dieses Artikels erfahren Sie:

• Was die install kann;
• Wie wird install intern implementiert?
• Was genau machen Vuex und Vue-Router -Plugin während der Installation?
  

Okay, ohne weitere Umschweife, fangen wir an! ! !

1. Durchführung der Installation in Vuex&Vue-Router

Hier sind zwei Fragen, über die Sie nachdenken sollten. Sie sind wie das Graben von Löchern. Ich werde sie unten einzeln beantworten:

• Warum können wir in unserem Projekt $router $store direkt verwenden, um die Werte und einige Methoden abzurufen?
• Warum werden diese beiden Plug-Ins zuerst mit Vue.use eingeführt? Erstellen Sie dann die Instanz und übergeben Sie sie an die Vue-Instanz.
  

Tatsächlich sind die Prinzipien beider gleich. Hier verwenden wir Vue-Router als Beispiel. Schauen wir uns zunächst die spezifische Implementierung seiner internen Installation an:

Klasse Router {
    Konstruktor(Optionen) {
        ...
    }
}

Router.install = Funktion(_Vue) {

    _Vue.mixin({
        vorErstellen() {
            wenn (diese.$options.router) {
                _Vue.prototype.$router = diese.$options.router
            }
        }
    })

}

Standardrouter exportieren;

• Was ist _Vue.mixin -Mixin? Dies entspricht dem Einmischen dieser Methode in alle Komponenten.
• Was ist beforeCreate ? Natürlich ist es ein Lebenszyklus von Vue, der vor create ausgeführt wird;
  

Lassen Sie uns in diesem Fall ein mutiges Urteil fällen. Vue-Router verwendet tatsächlich einen globalen Mixin in der Installationsfunktion und mountet this.$options.router in den Vue-Prototyp, wenn der Lebenszyklus beforeCreate ausgelöst wird, sodass wir this.$router verwenden können, um router aufzurufen. Klassenkamerad: Warte mal, hör auf! ! ! Sie klingen sehr nach Schwester Li, aber was ist this.$options.router und woher kommt es?

Keine Sorge, wir haben gerade das erste Problem gelöst, jetzt füllen wir das zweite Loch.

Normalerweise verwenden wir Vue-Router , und die Vue-Instanz, die die Eintragsdatei definiert, sieht wahrscheinlich so aus

// router/index.js
importiere VueRouter von „vue-router“;
importiere Vue von „vue“;

Vue.use(VueRouter);

const _router = [
    ...
]

const Router = neuer VueRouter(_router);

Standardrouter exportieren;

// Haupt.js
importiere Vue von „vue“;
Router von „Router“ importieren;

neuer Vue({
    Router,
    ...
}).$mount('#app');

Lassen Sie uns zunächst das ursprüngliche Beispiel analysieren.

• Vue.use() ruft hauptsächlich die install innerhalb des Plug-Ins auf und übergibt Vue Instanz als Parameter.
• this.$options.router wird oben verwendet, options stellen normalerweise Konfigurationselemente dar;
• In main.js übergeben wir die Router-Instanz als Konfigurationselement an die Vue-Instanz
  

beißen! ! ! Es wurden Elemente erkannt, also lasst uns eine kühne Vermutung anstellen. Vue-Router use zunächst einen globalen Mixin, um router im Konfigurationselement der Vue -Stamminstanz abzurufen und das Mounten zum richtigen Zeitpunkt auszuführen. Wenn dann die new Vue() -Stamminstanz erstellt wird, wird router eingefügt und dann der Lebenszyklus im globalen Mixin ausgelöst. Zu diesem Zeitpunkt enthält das Konfigurationselement this.$options der Stamminstanz bereits router Routerinstanz und schließlich ist der Montagevorgang abgeschlossen! ! ! Allein dieser Codeabschnitt ist logisch so streng und die Programmierideen sind so clever, dass man ihn schon als Experten bezeichnen würde! Brüder, tippt das Wort „Insider“ auf dem öffentlichen Bildschirm, hhhh.

2. Interne Implementierung der Installation in Vue

Nachdem Sie die Verwendung der häufig verwendeten Bibliothek install gelesen haben, frage ich mich, ob Sie etwas gelernt haben. Nach dem Aufwärmen können wir uns die interne Implementierung von install ansehen, beginnend mit dem Quellcode.

Exportfunktion initUse (Vue: GlobalAPI) {
    //Registriere eine auf der Instanz gemountete Use-Methode Vue.use = function (plugin: Function | Object) {
        // Array der aktuellen Plugins initialisieren const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
        // Wenn dieses Plugin bereits registriert wurde, dann verarbeite es nicht if (installedPlugins.indexOf(plugin) > -1) {

            gib das zurück

        }

        ...
        
        // Jetzt kommt der Punkt! ! !
        wenn (Typ des Plugins.install === 'Funktion') {
        // Wenn „install“ eine Funktion im Plugin ist, rufen Sie die Installationsmethode auf, zeigen Sie auf das Plugin und übergeben Sie eine Reihe von Parametern an plugin.install.apply(plugin, args).

        } sonst wenn (Typ des Plugins === 'Funktion') {
        // Wenn das Plugin selbst eine Funktion ist, behandeln Sie es als Installationsmethode, zeigen Sie auf das Plugin und übergeben Sie eine Reihe von Parametern an plugin.apply(null, args).

        }
        
        //Setze das Plugin in das Plugin-Array ein installedPlugins.push(plugin)

        gib das zurück
    }
}

Dieser Teil des Quellcodes ist sehr prägnant und gut lesbar. Das heißt, bei der Verwendung den Plugin-Typ bestimmen und install bzw. das Plugin selbst ausführen. Wenn wir uns die Erklärung auf der offiziellen Website genauer ansehen, sollte Class -Plugin tatsächlich eine Installationsmethode bereitstellen.

Abschluss:

Ich frage mich, ob Sie den Plug-In-Mechanismus von Vue besser verstehen? Tatsächlich können wir bei der Entwicklung von Plug-Ins install für viele andere Dinge verwenden. Beispielsweise registriert Vue-Router tatsächlich die globalen Komponenten Router-view und Router-link bei der Installation.

Dies ist das Ende dieses Artikels über ein vertieftes Verständnis des Plug-In-Mechanismus und install von Vue. Für ein noch relevanteres, vertieftes Verständnis des Plug-In-Mechanismus und der Installationsinhalte von Vue suchen Sie bitte nach früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!