浅谈Vue.use到底是什么鬼

我们在使用vue做项目开发的时候，看到不少*都是通过vue.use来进行使用，感觉甚是高大上。

不过vue.use到底是什么鬼？不妨来看个究竟。

其实这些*都可以称之为插件，它的功能范围没有严格的限制，一般包含如下几种：

• 添加全局方法或者属性。如: vue-custom-element
• 添加全局资源：指令/过滤器/过渡/组件等。如 vue-touch
• 通过全局混入来添加一些组件选项。如 vue-router
• 添加 vue 实例方法，通过把它们添加到 vue.prototype 上实现。
• 一个库，提供自己的 api，同时提供上面提到的一个或多个功能。如 vue-router

无论大小，插件要实现的功能无非就是上述这几种。但是，这并不妨碍我们创造出复杂的插件，不过我们还是希望给用户提供一个简单的使用方法，他不需要关注插件内部做了些什么。固vue提供了use方法，专门来在new vue()之前使用插件。

不管是官方提供的插件（例如vue-router、vuex），还是第三方的插件（例如elementui、ant）都是采用了此方式，不外乎插件内部的功能不同而已。当然，还有其他诸多此类插件，awesome-vue 就集合了大量由社区贡献的插件和库。

接下来，我们就来看下这个神秘的use方法是如何实现的。

vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 vue 构造器，第二个参数是一个可选的选项对象，用于传入插件的配置：

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
})

一个插件内部大概就是如上所示，其实也不外乎上述那几种东西，甚是简单????????。接下来我们就来看下真实的案例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
};

我们不难发现，其实自己来实现一个插件也是超级简单，只要对外暴露一个install方法即可，在使用vue.use的时候，会调用这个方法。所以我们只要将要实现的内容放到install内部即可。这样的好处就是插件需要一开始调用的方法都封装在install里面，更加精简和可拓展性更高。

大家可能也有注意到，这里的install其实是将所有的组件全部引入了。作为一个庞大的插件库，这样可能会有一些性能问题。用过的elementui的同学都知道，它是支持按需引入的，其实在上面的示例中也可以发现一些蛛丝马迹。

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
};

这里将每个组件都单独都导出了，而在每个组件内部，也类似的暴露了install来组件每个组件，这样就可以单独vue.use每个组件，从而实现按需引入的目的。

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

除了上述内容之外，还有几点值得我们注意一下：

插件传入的如果是一个对象，则执行其install方法，如果是一个函数，则执行它自身，并bind this为null，然后传入额外的参数

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

如果插件没有被注册过，那么注册成功之后会给插件添加一个installed的属性，其值为true。vue.use方法内部会检测插件的installed属性，从而避免重复注册插件

vue.use其实并不神秘，内部还是我们平时使用的这些东西，仅仅只是给他们套上了一层高端的外衣而已。我们在开发中，也可以尝试使用这种方式，不仅简单，而且有逼格

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。