Vue. use source code analysis, vue. use source code

Vue. use source code analysis, vue. use source code

I have some vue development experience and are no stranger to vue. use. When using global components such as vue-resource or vue-router, you must use the Vue. use method to introduce them. So what did vue. use do before the component was introduced? Let's take a look.

First go to vue. use source code

// The javascript method can be passed. Haha 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 Plug-In Through Vue. use (this plug-in can be understood as a variable or parameter temporarily), that is, Vue. use (plugin );

First, determine whether the attribute installed of the input parameter plugin exists. If the logic value exists and the logic value is true, directly return the result and the code behind the result will not be executed. What is the role of this judgment? I will talk about it later.

Assume that the installed attribute of the plug-in does not exist or is false. Then proceed.

var args = toArray(arguments, 1);

// A toArray method is executed. toArray receives two parameters. arguments is Vue. A set of parameters passed in by the use method, such as Vue. use (a, B, c), then arguments is similar to [a, B, c] (Note: arguments is only a class array, not a real array ). Because only one plugin parameter is introduced here, arguments is similar to [plugin].

What is the role of toArray? Check 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 with length = arguments is generated. length-1, and then perform a while loop. in reverse order, the arguments elements are assigned to ret, because ret is 1 less than arguments, in the end, it is equivalent to arguments assigning all the elements except the first element to ret. ToArray is mainly used to convert the class array into a real array so that the array method can be called. Because only one plugin parameter is introduced here, that is, arguments = [plugin], toArray returns an empty array [].

Next, run args. unshift (this), which is equivalent to []. unshift (Vue), that is, args = [Vue]. Then run

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

Check whether plug-in install is a function. If it is a function, execute pluign immediately. install method. The parameter passed in by install method is an array element in args, that is, the first parameter accepted by install is Vue.

If the install of plugin is not a function, determine whether the plug-in itself is a function. If it is a function, execute the plug-in function and the parameter is an array element in args.

Finally, set plugin. installed to true. Set plugin. if installed is set to true, the installation of the same plug-in is avoided multiple times, such as Vue. after use (plugin) is executed once, installed is set to true. If it is executed again, the first step is returned.

To sum up, Vue. the purpose of use is to execute a plugin function or execute the install method of pluign for plug-in registration, and pass the Vue object to plugin or its install method as the first parameter, other parameters of use are used as other parameters of plug-in or install.

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}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.