Analyser le code source de Vue.use

Ceux qui ont de l'expérience dans le développement de vue ne sont pas étrangers à vue.use. Lorsque vous utilisez des composants globaux tels que vue-resource ou vue-router, ils doivent être introduits via la méthode Vue.use pour fonctionner. Alors, que fait exactement vue.use avant l'introduction du composant ?

Allez d'abord au code source de 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
  };

Supposons que nous introduisions un plug-in via Vue.use (le plug-in peut être temporairement compris comme une variable ou un paramètre), c'est-à-dire Vue.use(plugin);

Déterminez d'abord si l'attribut installé du plugin de paramètre passé existe. S'il existe et que la valeur logique est vraie, retournez-le directement et le code suivant ne le sera pas. exécuté. Quel est le rôle de ce jugement ? J'en parlerai plus tard.

Nous supposons d'abord que l'attribut du plugin installé n'existe pas ou est faux, puis continuons à exécuter

var args = toArray(arguments, 1)

exécute une méthode toArray, toArray reçoit deux paramètres, les arguments sont Vue L'ensemble des paramètres transmis par la méthode .use, tels que Vue.use(a,b,c), alors les arguments sont similaires à [a,b,c] (Remarque : les arguments ressemblent simplement à des tableaux, pas de vrais tableaux)

Ici, parce que nous n'introduisons qu'un seul paramètre du plugin, les arguments sont similaires à ceux de [plugin].

Quelle est la fonction de toArray ? Regardez le code source.

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
}

Lorsque toArray(arguments,1) est exécuté, un nouveau tableau ret sera généré avec length = arguments.length-1, puis une boucle while sera effectuée pour attribuer les éléments d'arguments à ret dans ordre inverse, car ret est plus grand que les arguments La longueur est inférieure de 1

Cela équivaut donc finalement à attribuer les éléments restants à l'exception du premier élément à ret. La fonction principale de toArray est de convertir un tableau de classe en un tableau réel afin que la méthode array puisse être appelée.

Parce que je n'introduis ici qu'un seul paramètre de plugin, arguments=[plugin], donc toArray renvoie un tableau vide [].

Ensuite, exécutez ci-dessous, args.unshift(this), qui équivaut à [].unshift(Vue), c'est-à-dire args = [Vue];

Puis exécutez

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

Ici, on juge si l'installation du plugin est une fonction. S'il s'agit d'une fonction, la méthode plugign.install est exécutée immédiatement. Les paramètres transmis par la méthode install sont les éléments du tableau dans args, c'est-à-dire les éléments du tableau. Le premier paramètre accepté par l'installation est Vue.

Si l'installation du plugin n'est pas une fonction, déterminez si le plugin lui-même est une fonction. S'il s'agit d'une fonction, exécutez la fonction du plugin et les paramètres sont un tableau. éléments dans les arguments.

Enfin, définissez plugin.installed sur true. Le but de définir plugin.installed sur true est d'empêcher le même plug-in d'être installé plusieurs fois. Par exemple, après que Vue.use (plugin) soit exécuté une fois, installer est vrai s'il est réexécuté, il reviendra. à la première étape du jugement.

Pour résumer, la fonction de Vue.use est en fait d'exécuter une fonction de plugin ou d'exécuter la méthode d'installation de pluign pour enregistrer le plugin, et de passer l'objet Vue comme premier paramètre au plugin ou à son installation méthode, use Les autres paramètres sont utilisés comme autres paramètres du plugin ou de l'installation.

Donnez un exemple simple

import Vue from 'vue'
function test(a){
   console.log(a);//Vue
}
function test1(a,b){
　　console.log(a,b);//Vue hello
}
let oTest = {
   install：function(a,b){
      console.log(a,b);//Vue hello1
   }
}
Vue.use(test);
Vue.use(test1,'hello');
Vue.use(oTest,'hello1')
console.log(oTest);
//{
　　install:function(){...},
　　installed:true
}

Recommandations associées :

Un résumé des questions d'entretien de vue frontale en 2020 (avec réponses)

Recommandation du didacticiel Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!