Source Code Analysis of Vue.use

Those with Vue development experience are no stranger to vue.use. When using global components such as vue-resource or vue-router, they must be introduced through the Vue.use method to take effect. So what did vue.use do before the component was introduced?

First go to vue.use source code

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
  };

Suppose we introduce a plugin via Vue.use (the plugin can be temporarily understood as a variable or parameter), that is, Vue.use (plugin);

First, determine whether the attribute installed of the passed parameter plugin exists. If it exists and the logical value is true, then return directly and the code behind will not be executed. What is the purpose of this judgment? I’ll talk about it later.

We first assume that the attribute installed of the plugin does not exist or is false, then continue to execute

var args = toArray (arguments, 1)

A toArray method is executed, toArray receives two parameters, arguments is the parameter set passed by the Vue.use method, such as Vue.use (a, b, c), then arguments are similar to [a, b, c] (description : Arguments are just array-like, not real arrays)

Because we only introduce a parameter plugin here, arguments are similar to [plugin].

What does toArray do? Look at the source code.

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
}

When toArray (arguments, 1) is executed, a new array ret is generated with length = arguments.length-1, and then a while loop is performed, and the elements of arguments are assigned to ret in reverse order, because ret is 1 less than the arguments length.

So in the end it is equivalent to arguments assigning the remaining elements except the first element to ret. The main purpose of toArray is to convert the array-like array into a real array, so that the methods of the array can be called.

Because I only introduce one plugin parameter here, namely arguments = [plugin], toArray returns an empty array [].

Then proceed to execute, args.unshift (this), equivalent to [] .unshift (Vue), that is, args = [Vue];

Then execute

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

It is judged here whether the plugin’s install is a function. If it is a function, immediately execute the plumn.install method. The parameters passed to the install method are the array elements in args, that is, the first parameter accepted by install is Vue.

If the plugin’s install is not a function, then determine whether the plugin itself is a function. If it is a function, then execute the plugin function with the parameters as array elements in args.

Finally set plugin.installed to true. The effect of setting plugin.installed to true is to prevent the same plugin from being installed multiple times. For example, after Vue.use (plugin) is executed once, installed is true. If it is executed again, it will return to the first step.

In summary, the role of Vue.use is actually to execute a plugin function or execute the install method of plugin to register the plugin, and pass the Vue object as the first parameter to the plugin or its install method, and other parameters of use as the plugin or Install other parameters.

Give a simple example

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
}

#vue #vue.use