Das Prinzip und die grundlegende Verwendung von Vue.use() in Vue

Vorwort

Ich glaube, dass viele Leute Vue.use() verwenden werden, wenn sie Komponenten anderer Leute mit Vue verwenden. Zum Beispiel: Vue.use(VueRouter), Vue.use(MintUI). Aber wenn Sie Axios verwenden, müssen Sie Vue.use(axios) nicht verwenden, sondern können es direkt verwenden. Warum ist das so?
Weil Axios nicht installiert ist.

1. Verstehen mit Beispielen

Erstellen Sie im neuen Projekt zwei Dateien: plugins.js use.js:

// plugins.js
const Plugin1 = {
  installieren(a,b){
    console.log('Plugin1 erster Parameter:',a)
    console.log('Plugin1 zweiter Parameter:',b)
  }
}

Funktion Plugin2(a,b){
  console.log('Plugin2 erster Parameter:',a)
  console.log('Plugin2 zweiter Parameter:',b)
}

export{Plugin1,Plugin2}

// verwenden.js 
Vue von „vue“ importieren
importiere {Plugin1,Plugin2} aus './plugins'

Vue.use(Plugin1,'Parameter 1')
Vue.use(Plugin2,'Parameter A')

// Haupt.js
Vue von „vue“ importieren
App aus „./App.vue“ importieren
Router aus „./router“ importieren
importiere './assets/plugins/use'

Vue.config.productionTip = falsch
neuer Vue({
  Router,
  speichern,
  rendern: h => h(App)
}).$mount('#app')

Daraus können wir ersehen, dass die beiden Konsolen ausgedruckt werden, die wir in der Installationsmethode in Plugin1 geschrieben haben. Die erste druckt das Vue-Objekt und die zweite ist der Parameter, den wir übergeben haben.

Plugin2 hat keine Install-Methode. Es ist selbst eine Methode und kann auch zwei Parameter drucken. Der erste ist das Vue-Objekt und der zweite ist der Parameter, den wir übergeben haben.
Jetzt haben wir also eine vage Vermutung über Vue.use~

2. Analysieren Sie den Quellcode

toArray-Quellcode

Exportfunktion nachArray (Liste: beliebig, Start?: Zahl): Array<beliebig> {
  start = start || 0
  lass i = Liste.Länge - Start
  const ret: Array<beliebig> = neues Array(i)
  während (i--) {
    ret[i] = Liste[i + Start]
  }
  Rückkehr zurück
}

importiere { toArray } von '../util/index'

Exportfunktion initUse (Vue: GlobalAPI) {
  Vue.use = Funktion (Plugin: Funktion | Objekt) {
    const installiertePlugins = (diese._installedPlugins || (diese._installedPlugins = []))
    wenn (installiertePlugins.indexOf(plugin) > -1) {
      gib das zurück
    }

    // zusätzliche Parameter
    const args = toArray(Argumente, 1)
    args.unshift(dies)
    wenn (Typ des Plugins.install === 'Funktion') {
      plugin.install.apply(plugin, args)
    } sonst wenn (Typ des Plugins === 'Funktion') {
      plugin.apply(null, args)
    }
    installiertePlugins.push(Plugin)
    gib das zurück
  }
}

Aus dem Quellcode können wir entnehmen, dass Vue zunächst ermittelt, ob das Plug-In registriert wurde, keine wiederholte Registrierung zulässt und die empfangenen Plug-In-Parameter auf den Typ „Funktion | Objekt“ beschränkt sind.

Für diese beiden Typen gibt es unterschiedliche Behandlungen.

Zuerst organisieren wir die Parameter, die wir übergeben haben, in einem Array: const args = toArray(arguments, 1)；

Fügen Sie dann das Vue-Objekt am Anfang des Arrays args.unshift(this) hinzu, wobei dies auf das Vue-Objekt zeigt.

Bei der Installation des Plugins übergeben wir (den ersten Parameter von Vue.use) eine Methode. Das heißt, wenn wir ein Objekt übergeben, das eine Installationsmethode enthält, rufen wir die Installationsmethode dieses Plugins auf und übergeben das sortierte Array als Parameter an die Installationsmethode, plugin.install.apply(plugin, args)；

Wenn das Plugin, das wir übergeben, eine Funktion ist, rufen wir die Funktion direkt auf und übergeben das sortierte Array als Parameter: plugin.apply(null, args);

Fügen Sie dieses Plug-In dann dem Array der hinzugefügten Plug-Ins hinzu und geben Sie an, dass es als installedPlugins.push(plugin)；
Geben Sie abschließend das Vue-Objekt zurück.

3. Zusammenfassung

Durch die obige Analyse können wir erkennen, dass es in Zukunft zwei Möglichkeiten gibt, Plug-Ins zu schreiben.

Eine Möglichkeit besteht darin, die Logik dieses Plug-Ins in ein Objekt zu kapseln und schließlich den Geschäftscode in der Installation zu schreiben, um ihn dem Vue-Objekt verfügbar zu machen. Der Vorteil hierbei besteht darin, dass Sie diesem Objekt beliebige Parameter hinzufügen können, um die Installationsfunktion prägnanter und erweiterbarer zu gestalten.

Eine andere Möglichkeit besteht darin, die gesamte Logik in eine Funktion zu schreiben und sie Vue verfügbar zu machen.

Tatsächlich sind die Prinzipien der beiden Methoden dieselben, außer dass die zweite Methode das Plug-In direkt als Installationsfunktion behandelt.

Persönlich halte ich die erste Methode für sinnvoller.

exportiere const Plugin = {
    installieren(Vue) {
        Vue.Komponente …
        … und Vue.mixins …
        Aussicht...
        // Wir können in der Installation auch andere Funktionen ausführen. Vue verweist dies auf unser Plugin console.log(this) // {install: ...,utils: ...}
        this.utils(Vue) // Führe die Utilities-Funktion aus console.log(this.COUNT) // 0
    },
    Dienstprogramme(Vue) {
        Aussicht...
        console.log(Vue) // Vue
    },
    ANZAHL: 0    
}
// Wir können diesem Objekt Parameter hinzufügen, und Vue führt nur die Installationsmethode aus, während andere Methoden als Hilfsfunktionen verwendet werden können, um die Installationsmethode zu kapseln const test = 'test'
Exportfunktion Plugin2(Vue) {
    Aussicht...
    konsole.log(test) // "Test"
    // Beachten Sie, dass Vue, wenn das Plugin als Funktion geschrieben ist, nur this auf null verweist, nicht auf diese Funktion console.log(this) // null
}
// Auf diese Weise können wir die Plug-In-Logik nur in einer Funktion schreiben und die Kapselung ist nicht so stark

Zusammenfassen

Damit ist dieser Artikel über die Prinzipien und die grundlegende Verwendung von Vue.use() in Vue abgeschlossen. Weitere relevante Inhalte zu den Prinzipien und der Verwendung von Vue.use() finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!