What the hell is Vue. Use

Time:2020-2-24

When we use Vue for project development, we see that many wheels are used through vue.use, which makes us feel very tall.

But what the hell is Vue. Use? Let’s see.

In fact, these wheels can be called plug-ins. There is no strict limit to their functional scope, which generally includes the following:

  • Add a global method or property. For example: Vue custom element
  • Add global resources: directives / filters / transitions / components, etc. Such as Vue touch
  • Add some component options through global blending. Such as Vue router
  • Add Vue instance methods by adding them to vue.prototype.
  • A library that provides its own API and one or more of the functions mentioned above. Such as Vue router

Regardless of the size, plug-ins to achieve the function is nothing more than these kinds. However, this does not prevent us from creating complex plug-ins, but we still want to provide users with a simple way to use them, and they do not need to pay attention to what is done inside the plug-in. Solid Vue provides the use method, which is designed to use plug-ins before new vue().

Whether it’s official plug-ins (such as Vue router, vuex) or third-party plug-ins (such as elementui, ant), this method is adopted, but the internal functions of plug-ins are different. Of course, there are many other plug-ins of this kind. Awesome Vue is a collection of plug-ins and libraries contributed by the community.

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

The plug-in for vue.js should expose an install method. The first parameter of this method is the Vue constructor, and the second parameter is an optional option object for the configuration of the incoming plug-in:

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

Vue.use(MyPlugin,{
 // ...options
})

The internal part of a plug-in is probably as shown above. In fact, it’s nothing more than the above several things. It’s very simple It is very important. Next, let’s take a look at the real case elementui:

Const components = [pagination, dialog, autocomplete / * several components are omitted here * /];
const install = function(Vue, opts = {}) {
 locale.use(opts.locale);
 locale.i18n(opts.i18n);
 //Register global components
 components.forEach(component => {
  Vue.component(component.name, component);
 });
 Vue.use(InfiniteScroll);
 Vue.use(Loading.directive);
 //Add instance method
 Vue.prototype.$ELEMENT = {
  size: opts.size || '',
  zIndex: opts.zIndex || 2000
 };
 //Add instance method
 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
};

It’s not hard to find that it’s super simple to implement a plug-in by ourselves. As long as an install method is exposed externally, it will be called when using vue.use. So we just need to put the content to be implemented into install. The advantage is that the methods that plug-ins need to call at the beginning are all encapsulated in install, which is more concise and extensible.

You may also notice that install here actually introduces all components. As a large plug-in library, there may be some performance problems. All the students who have used the elementui know that it supports on-demand introduction. In fact, some clues can be found in the above example.

Const components = [pagination, dialog, autocomplete / * several components are omitted here * /];
//... omit middle content
export default {
 version: '2.13.0',
 locale: locale.use,
 i18n: locale.i18n,
 install,
 CollapseTransition,
 Loading,
 Pagination,
 Dialog,
 Autocomplete,
 // ...other components
};

Here, each component is exported separately. Inside each component, install is similarly exposed to each component. In this way, each component can be vue.use separately to achieve the purpose of on-demand introduction.


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

In addition to the above, we should pay attention to the following points:

If the plug-in passes in an object, it will execute its install method. If it is a function, it will execute itself, bind this is null, and then pass in additional parameters


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

If the plug-in has not been registered, an installed property will be added to the plug-in after the registration is successful, with a value of true. The vue.use method internally detects the installed property of the plug-in to avoid duplicate plug-in registration

Vue. Use is not mysterious. It’s just a high-end coat that we usually use inside. We can also try to use this method in development, which is not only simple, but also powerful

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

Python basics Chinese series tutorial · translation completed

Original: Python basics Python tutorial Protocol: CC by-nc-sa 4.0 Welcome anyone to participate and improve: a person can go very fast, but a group of people can go further. Online reading Apache CN learning resources catalog introduce Seven reasons to learn Python Why Python is great Learn Python introduction Executing Python scripts variable character string […]