Source Code Analysis of Vue.use

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.

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
}

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

7 Best Vue Highlight Component for Your Vue App

Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I've collected.

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.