Vue.use究竟是什么鬼

字 数：3781， 阅读时间：14分钟， 阅读原文

咱们在使用Vue作项目开发的时候，看到很多轮子都是经过Vue.use来进行使用，感受甚是高大上。 不过Vue.use究竟是什么鬼？不妨来看个究竟。

其实这些轮子均可以称之为插件，它的功能范围没有严格的限制，通常包含以下几种：

1. 添加全局方法或者属性。如: vue-custom-element
2. 添加全局资源：指令/过滤器/过渡/组件等。如 vue-touch
3. 经过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，经过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供本身的 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其实并不神秘，内部仍是咱们平时使用的这些东西，仅仅只是给他们套上了一层高端的外衣而已。咱们在开发中，也能够尝试使用这种方式，不只简单，并且有逼格🚀🚀