Vue.use Source Code Analysis

Posted by libertyct on Mon, 29 Jul 2019 13:55:16 +0200

I think I've had experience in Vue development, and I'm no stranger to vue. use. When global components such as vue-resource or vue-router are used, they must be introduced through the Vue.use method. So what exactly did vue. use do before components were introduced? Let's have a glimpse.

First up 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 through Vue.use (which can be temporarily understood as a variable or parameter), namely 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 code behind it will not be executed. What is the role of this judgment? I'll talk about it later.

Let's assume that the plugin's attribute installed does not exist or is false, then proceed to the next step.

var args = toArray(arguments, 1);
//A toArray method is executed, and toArray receives two parameters. arguments are the set of parameters passed in by the Vue.use method, such as Vue.use(a,b,c). Then arguments are similar to [a,b,c]. (Note: arguments are just class arrays, not real arrays)
Here we introduce only one parameter plugin,therefore arguments Be similar to[plugin].

What is the role 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 toArray(arguments,1) is executed, a new array RET is generated, length = arguments.length-1, and then a while loop is performed to assign the elements of arguments to ret in reverse order, because RET is less than 1 length of arguments, so it is eventually equivalent to arguments assigning the rest of the elements except the first element to ret. The main function of toArray is to convert class arrays into real arrays so that the methods of arrays can be invoked. Because I only introduce a plugin parameter here, arguments=[plugin], toArray returns to an empty array [].

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

If the install of the plugin is a function, the pluign.install method is executed immediately. The parameter passed by the install method is the array element in args, that is, the first parameter accepted by the install is Vue.

If the install of the plugin is not a function, then judge whether the plugin itself is a function, and if it is a function, then execute the plugin function with an array element in args as the parameter.

Finally, set plugin.installed to true. The purpose of setting plugin.installed to true is to avoid multiple installations of the same plug-in, such as Vue.use(plugin) once, installed to true, and when it is executed again, it returns to the first step.

To sum up, the function of Vue.use is to execute a plugin function or pluign's install method for plugin registration, and pass the Vue object as the first parameter to the plugin or its install method, and other parameters of use as other parameters of plugin or install.

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

Topics: PHP Vue Attribute less REST