Analysieren Sie den Quellcode von Vue.use

Wer Erfahrung in der Vue-Entwicklung hat, ist mit vue.use kein Unbekannter. Wenn globale Komponenten wie vue-resource oder vue-router verwendet werden, müssen diese über die Vue.use-Methode eingeführt werden, damit sie funktionieren. Was genau macht vue.use also, bevor die Komponente eingeführt wird?

Gehen Sie zuerst zum Quellcode von vue.use

Vue.use = function (plugin) {
    /* istanbul ignore if */
    if (plugin.installed) {
      return
    }
    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this);
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }
    plugin.installed = true;
    return this
  };

Angenommen, wir führen ein Plug-in-Plugin über Vue.use ein (das Plug-in kann vorübergehend als Variable oder Parameter verstanden werden), also Vue.use(plugin );

Bestimmen Sie zunächst die eingehenden Parameter. Existiert das installierte Attribut des Plugins? Wenn es vorhanden ist und der logische Wert wahr ist, wird es direkt zurückgegeben und der nachfolgende Code wird nicht ausgeführt ? Ich werde später darüber sprechen.

Wir gehen zunächst davon aus, dass das installierte Plugin-Attribut nicht existiert oder falsch ist, und fahren dann mit der Ausführung fort.

var args = toArray(arguments, 1)

Eine toArray-Methode wird ausgeführt, nämlich der von der Vue.use-Methode übergebene Parametersatz. zum Beispiel Vue.use(a,b,c), dann ähneln die Argumente [a,b,c] (Hinweis: Argumente sind nur Array-artig, keine echten Arrays)

Hier, weil wir nur ein Parameter-Plugin vorstellen , daher ähneln die Argumente denen von [plugin].

Was ist die Funktion von toArray? Schauen Sie sich den Quellcode an.

function toArray (list, start) {
  start = start || 0;
  var i = list.length - start;
  var ret = new Array(i);
  while (i--) {
    ret[i] = list[i + start];
  }
  return ret
}

Bei der Ausführung von toArray(arguments,1) wird ein neues Array ret mit length = arguments.length-1 generiert, und dann wird eine while-Schleife ausgeführt, um die Elemente von arguments in umgekehrter Reihenfolge zu ret zuzuweisen, da ret ist 1 kleiner als die Länge der Argumente

Am Ende ist es also gleichbedeutend damit, dass Argumente die verbleibenden Elemente außer dem ersten Element ret zuweisen. Die Hauptfunktion von toArray besteht darin, ein Klassenarray in ein echtes Array umzuwandeln, damit die Array-Methode aufgerufen werden kann.

Da ich hier nur einen Plugin-Parameter eingeführt habe, arguments=[plugin], gibt toArray ein leeres Array [] zurück.

Dann führen Sie args.unshift(this) aus, was [].unshift(Vue) entspricht, also args = [Vue];

Dann führen Sie

if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }

Hier wird beurteilt, ob die Installation des Plugin ist eine Funktion. Wenn dies der Fall ist, führen Sie sofort die Methode plug.install aus. Der von der Installationsmethode übergebene Parameter ist das Array-Element in args, dh der erste von der Installation akzeptierte Parameter ist Vue.

Wenn die Installation erfolgt Das Plugin ist keine Funktion. Bestimmen Sie dann, ob das Plugin selbst eine Funktion ist. Wenn es sich um eine Funktion handelt, wird die Plugin-Funktion ausgeführt und die Parameter sind Array-Elemente in args.

Setzen Sie schließlich „plugin.installed“ auf „true“. Der Zweck, „plugin.installed“ auf „true“ zu setzen, besteht darin, zu verhindern, dass dasselbe Plug-in mehrmals installiert wird. Nachdem Vue.use (Plugin) beispielsweise einmal ausgeführt wurde, ist „installed“ wahr zum ersten Schritt des Urteils.

Zusammenfassend besteht die Funktion von Vue.use tatsächlich darin, eine Plugin-Funktion auszuführen oder die Installationsmethode von Plug-In auszuführen, um das Plug-In zu registrieren und das Vue-Objekt als ersten Parameter an das Plugin oder seine Installationsmethode zu übergeben. und die anderen Verwendungsparameter als Andere Parameter für Plugin oder Installation. „Geben Sie ein einfaches Beispiel.“

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonAnalysieren Sie den Quellcode von Vue.use. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!