Analyze the source code of Vue.use

Those who have experience in vue development 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 work. So what exactly does vue.use do before the component is introduced?

First go to the 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 plug-in plugin through Vue.use (the plug-in can be temporarily understood as a variable or parameter), that is, Vue.use(plugin);

First determine whether the attribute installed of the incoming parameter plugin exists. If it exists and the logical value is true, then return directly and the subsequent code will not be executed. What is the role of this judgment? Will talk about it later.

We first assume that the plugin attribute installed 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 are Vue The set of parameters passed in by the .use method, such as Vue.use(a,b,c), then the arguments are similar to [a,b,c] (Note: arguments are just array-like, not real arrays)

Here because we only introduce one parameter plugin, the arguments are similar to [plugin].

What is the function of toArray? 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 executing toArray(arguments,1), a new array ret will be generated with length = arguments.length-1, and then a while loop will be performed to assign the elements of arguments to ret in reverse order, because ret is longer than arguments. The length is 1.

So it is ultimately equivalent to assigning the remaining elements except the first element to ret. The main function of toArray is to convert a class array into a real array so that the array method can be called.

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

Then execute, args.unshift(this), which is 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);
    }

Here, it is judged whether the plugin's install is a function. If it is a function, the plugign.install method is executed immediately. The parameters passed in by 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, and the parameters are array elements in args.

Finally set plugin.installed to true. The purpose of setting plugin.installed to true is to prevent the same plug-in 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 of judgment.

To sum up, the function of Vue.use is actually to execute a plugin function or execute the install method of pluign to register the plugin, and pass the Vue object as the first parameter to the plugin or its install method, use The other parameters are used as other parameters of plugin or install.

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
}

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit: Introduction to programming! !

The above is the detailed content of Analyze the source code of Vue.use. For more information, please follow other related articles on the PHP Chinese website!