A brief discussion of what Vue.use is?

What the heck is Vue.use? This article will introduce you to Vue.use. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

When we use Vue for project development, we see that many wheels are used through Vue.use, which feels very high-end.

But what the hell is Vue.use? Let's take a look and see what happens.

In fact, these wheels can be called plug-ins, and their functional scope is not strictly limited. They generally include the following types:

1. Add global methods or attributes. For example: vue-custom-element
2. Add global resources: directives/filters/transitions/components, etc. For example, vue-touch
3. adds some component options through global mixing. For example, vue-router
4. adds Vue instance methods by adding them to Vue.prototype.
5. A library that provides its own API while providing one or more of the functions mentioned above. For example, vue-router

No matter how big or small, the functions that the plug-in wants to achieve 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 method of use, and he does not need to pay attention to what is done inside the plug-in. Fixed Vue provides the use method, specifically to use the plug-in before new Vue().

Whether it is an officially provided plug-in (such as vue-router, vuex) or a third-party plug-in (such as ElementUI, ant) all adopt this method, but the functions inside the plug-in are different. Of course, there are many other such plug-ins, and awesome-vue has a large collection of plug-ins and libraries contributed by the community.

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

Vue.js Plugins should expose an install method. The first parameter of this method is the Vue constructor, and the second parameter is an optional options object used to pass in the plug-in configuration:

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
  // 5. 注册全局组件
  Vue.component('myButton',{
    // ...组件选项
  })
}

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

The inside of a plug-in is probably As shown above, it is actually nothing more than the above-mentioned things, very simple. Next, let’s take a look at a real case ElementUI:

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);
  // 注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component);
  });
  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);
  // 添加实例方法
  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };
  // 添加实例方法
  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
};

We can easily find that it is super simple to implement a plug-in yourself, as long as it is exposed to the outside worldinstallMethod is enough, this method will be called when using Vue.use. So we only need to put the content to be implemented inside install. The advantage of this is that the methods that the plug-in needs to call at the beginning are encapsulated in install, which is more streamlined and more scalable.

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

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
// ....省去中间内容
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, and inside each component, it is similarly exposedinstall to assemble each component, so that it can be Vue.useEach component is introduced on demand.

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, there are several points worthy of our attention:

• If the plug-in passes in an object, it will execute its install Method, if it is a function, executes itself, bind this is null, and then passes 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 attribute will be added to the plug-in after successful registration, with a value of true. The Vue.use method will internally detect the installed attribute of the plug-in to avoid repeated registration of the plug-in

Vue.use actually does not Mysterious, the interior is still the same things we usually use, it's just a high-end coat put on them. We can also try to use this method during development, which is not only simple, but also powerful.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommended: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of A brief discussion of what Vue.use is?. For more information, please follow other related articles on the PHP Chinese website!