Vue.use(VueRouter), vue.use (Vuex), Element vue.use (Button).use(Input), That its underlying source code is exactly how to load Vue related plug-ins and chain calls, the following step with readers “break” implementation code.

Vue.use Method description

The method of vue. use is introduced on the official website first:

  1. Install vue.js plug-in. If the plug-in is an object, the install method must be provided. If the plug-in were a function, it would be used as the install method. When the install method is called, Vue is passed in as an argument.

  2. This method needs to be called before calling new Vue().

  3. When the install method is called multiple times by the same plug-in, the plug-in will only be installed once.

The above introduction is mainly about the function and use of the use method notice, here note that the use method passes in the number of parameters is actually unlimited, support multiple parameters; The first argument can also be passed to an object or function with the install attribute method.

Vue.use source code analysis

Vue. Use:

// ...
Vue.use = function (plugin) {
  var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
  if (installedPlugins.indexOf(plugin) > -1) {
    return this
  }
  // 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);
  }
  installedPlugins.push(plugin);
  return this
};
// ...
Copy the code

The analysis is divided into four steps:

Step 1: Call Install only once

The effect is that when Install is called multiple times, the plug-in will only be installed once. Check to see if the current Vue object is in the _installedPlugins array. If so, return the current Vue object.

Vue.use = function (plugin) {
  // Step 1: When install is called multiple times, the plug-in will only be installed once.
  var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
  if (installedPlugins.indexOf(plugin) > -1) {
    return this
  }
  / /...
}
Copy the code

Step 2: Convert arguments to an array

Process arguments, converting the remaining arguments on arguments (excluding the first one) to a new array, taking the current Vue object (that is, this in the code) as the first argument to the new array

// To convert an array-like object into an array, start is the starting position of the conversion
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
}

Vue.use = function (plugin) {
  // ...
  
  Use (MyTest, 1, 2, 3); use(MyTest, 1, 2, 3); Args = [this, 1, 2, 3] */
  var args = toArray(arguments.1);
  // Add a this to the front of the new array
  args.unshift(this);
}
Copy the code

Step 3: Call the install method of the plug-in

Determine whether the install attribute of the first argument to the use method is a function or whether the first argument is a function. If either of these parameters is met, the apply method calls the first argument function and passes in the rest of the use arguments.

Vue.use = function (plugin) {
  // ...
  Use (MyTest, 1, 2, 3); * 1. MyTest is a plugin on MyTest. If MyTest is a function, use apply to call mytest. install and bind this to MyTest. * 2. Check whether plugin(MyTest) is a function in the second judgment expression. If so, pass in the remaining parameters and use apply to execute the call directly. * /
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args);
    Mytest(this, 1, 2, 3, 4, 5), where this is Vue
  } else if (typeof plugin === 'function') {
    plugin.apply(null, args); }}Copy the code

Step 4: Return this

Add the current plug-in object to the end of the _installedPlugins array, and return this, which is the current Vue object. The purpose of returning this is to enable the use method to support chained calls.

// To convert an array-like object into an array, start is the starting position of the conversion
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
}

Vue.use = function (plugin) {
  // ...
  // Step 4: Add plugin plugin to the end of this._installedplugins array, return this
  installedPlugins.push(plugin);
  // This returns this, which can implement the chain call
  return this
}
Copy the code

If you find something wrong or can be improved, please point it out in the comments section. If you think it’s good or helpful, please like it, comment on it or share it with us. Thank you