When we were using Vue for project development, we saw that many wheels were used through, which felt very high-end.
But what the hell is it? Let's see what's going on.
In fact, these wheels can be called plug-ins. Its functional scope is not strictly limited, and it generally includes the following types:
- Add global methods or attributes. For example: vue-custom-element
- Add global resources: directives/filters/transitions/components, etc. Such as vue-touch
- Add some component options by global mixing. Such as vue-router
- Add Vue instance methods, by adding them to them.
- A library that provides its own API while providing one or more of the functions mentioned above. Such as vue-router
Regardless of size, the functions that plug-in needs to implement are nothing more than the above. However, this does not prevent us from creating complex plug-ins, but we still hope 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. Fix Vue provides a use method, specifically to use plugins before new Vue().
Whether it is the official plug-in (such as vue-router, vuex) or third-party plug-in (such as ElementUI, ant) that adopts this method, it is nothing more than the different functions inside the plug-in. Of course, there are many other plug-ins of this type, awesome-vue brings together a large number of community-contributed plug-ins and libraries.
Next, let’s take a look at how this mysterious use method is implemented.
The plugin 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 passed to the plugin:
= function (Vue, options) {
// 1. Add global methods or properties = function () {
// Logic... }
// 2. Add global resources ('my-directive', {
bind (el, binding, vnode, oldVnode) {
// Logic... }
...
})
// 3. Inject component options ({
created: function () {
// Logic... }
...
})
// 4. Add an instance method .$myMethod = function (methodOptions) {
// Logic... }
// 5. Register global components ('myButton',{
// ...Component Options })
}
(MyPlugin,{
// ...options
})
The inside of a plug-in is probably as shown above, but it is actually nothing more than the above things, it is very simple 😄😄. Next, let’s take a look at the real case ElementUI:
const components = [ Pagination, Dialog, Autocomplete/* Due to the length of this article, several components are omitted */];
const install = function(Vue, opts = {}) {
();
locale.i18n(opts.i18n);
// Register global components (component => {
(, component);
});
(InfiniteScroll);
();
// Add an instance method .$ELEMENT = {
size: || '',
zIndex: || 2000
};
// Add an instance method .$loading = ;
.$msgbox = MessageBox;
.$alert = ;
.$confirm = ;
.$prompt = ;
.$notify = Notification;
.$message = Message;
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && ) {
install();
}
export default {
version: '2.13.0',
locale: ,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
Pagination,
Dialog,
Autocomplete,
// ...other components
};
It is not difficult to find that it is actually super simple to implement a plug-in by yourself. Just expose an install method to the outside world. This method will be called when used. So we just need to put the content we want to implement into install. The advantage of this is that the methods that the plug-in needs to call at the beginning are encapsulated in the install, which is more streamlined and scalable.
You may have noticed that the install here actually introduces all components. As a huge plug-in library, this may have some performance issues. Students who have used ElementUI know that it supports on-demand introduction, and in fact, some clues can be found in the above examples.
const components = [ Pagination, Dialog, Autocomplete/* Due to the length of this article, several components are omitted */];
// ....Save the intermediate contentexport default {
version: '2.13.0',
locale: ,
i18n: locale.i18n,
install,
CollapseTransition,
Loading,
Pagination,
Dialog,
Autocomplete,
// ...other components
};
Each component is exported separately here, and inside each component, install is similarly exposed to component each component, so that each component can be individually introduced, thus achieving the purpose of on-demand introduction.
import Alert from './src/main';
/* istanbul ignore next */
= function(Vue) {
(, Alert);
};
export default Alert;
In addition to the above content, there are a few other points worth our attention:
If the plugin passes in, it executes its install method, if it is a function, it executes itself, bind this to null, and then passes in extra parameters
if (typeof === 'function') {
(plugin, args);
} else if (typeof plugin === 'function') {
(null, args);
}
If the plug-in has not been registered, then after the registration is successful, an installed property will be added to the plug-in, with the value of true. The method will detect the installed attribute of the plug-in internally, thereby avoiding repeated registration of the plug-in.
In fact, it is not mysterious. The inside is still the things we usually use, and it just puts a high-end coat on them. We can also try this method in development. It is not only simple, but also stylish.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.