Word count: 3781. Reading Time: 14 minutes

When we used Vue to do project development, we saw that many wheels were used through VUe. use, which felt very high. But what the hell is vue.use? Let’s take a look.

In fact, these wheels can be called plug-ins, the scope of its functions are not strictly limited, generally including the following:

  1. Add global methods or properties. Such as:vue-custom-element
  2. Add global resources: directives/filters/transitions/components, etc. Such asvue-touch
  3. Add some component options through global blending. Such asvue-router
  4. addVueInstance methods by adding them toVue.prototypeOn the implementation.
  5. A library that provides its own API and provides one or more of the functions mentioned above. Such asvue-router

Plug-ins, large or small, do just that. That didn’t stop us from creating complex plug-ins, but we wanted to give the user a simple way to use them without having to pay attention to what was going on inside the plug-in. Solid Vue provides the use method to use plug-ins before new Vue().

Both official plug-ins (such as Vue-Router, vuex) and third-party plug-ins (such as ElementUI, Ant) are used in this way, but the internal functionality of the plug-in is different. Of course, there are many others, and awesome-Vue is a collection of community-contributed plug-ins and libraries.

Next, let’s take a look at how the mysterious use method is implemented.

Vue.js plug-ins should expose an install method. The first argument to this method is the Vue constructor, and the second argument is an optional option object for the configuration passed in to the plug-in:

MyPlugin.install = function (Vue, options) {
  // 1. Add a global method or attribute
  Vue.myGlobalMethod = function () {
    / / logic...
  }
  // 2. Add global resources
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      / / logic...}... })// 3. Inject component options
  Vue.mixin({
    created: function () {
      / / logic...}... })// 4. Add instance methods
  Vue.prototype.$myMethod = function (methodOptions) {
    / / logic...
  }
  // 5. Register global components
  Vue.component('myButton', {/ /... Component options})}Copy the code
Vue.use(MyPlugin,{
  / /... options
})
Copy the code

The inside of a plugin looks something like this, but it’s nothing more than the above, even simple 😄😄. Let’s take a look at the real case ElementUI:

const components = [ Pagination, Dialog, Autocomplete/* Some components are omitted here for space */];
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);
  // Register the global component
  components.forEach(component= > {
    Vue.component(component.name, component);
  });
  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);
  // Add instance methods
  Vue.prototype.$ELEMENT = {
    size: opts.size || ' '.zIndex: opts.zIndex || 2000
  };
  // Add instance methods
  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;
};
/* istanbul ignore if */
if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  version: '2.13.0'.locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  / /... other components
};
Copy the code

It is not hard to find that it is super easy to implement a plug-in yourself, as long as you expose an install method, when using vue. use, this method will be called. So we just need to put what we want to implement inside Install. The advantage of this is that the methods the plug-in initially calls are wrapped in Install, making it more streamlined and extensible.

As you may have noticed, install actually introduces all the components. As a large library of plug-ins, there may be some performance issues. Those of you who have used ElementUI know that it supports importing on demand, and you can actually see some clues in the example above.

const components = [ Pagination, Dialog, Autocomplete/* Some components are omitted here for space */];
/ /... Leave out the middle
export default {
  version: '2.13.0'.locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  / /... other components
};
Copy the code

Each component is exported separately, and within each component, install is similarly exposed for each component so that each component can be Vue. Use separately for on-demand import purposes.

import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};
export default Alert;
Copy the code

In addition to the above, there are a few points worth noting:

  • If the plug-in passes in an object, it executes itinstallMethod, if a function, executes itself andbind thisfornull, and pass in additional parameters
if (typeof plugin.install === 'function') {
  plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
  plugin.apply(null, args);
}
Copy the code
  • If the plug-in is not already registered, one will be added to the plug-in after successful registrationinstalledProperty, whose value istrue.Vue.useThe plug-in is checked internally by the methodinstalledProperty to avoid duplicate plug-in registrations

Vue.use is not a mystery, the interior is still the things we usually use, just to cover them with a layer of clothing. We are in the development, can also try to use this way, not only simple, and forced case 🚀🚀