vue.use()干了什么

原创已于 2022-08-03 13:34:35 修改 · 733 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-08-03 11:44:11 首次发布

Vue.use()方法主要用于安装Vue插件，它可以执行插件对象的install方法或直接运行函数。当传入的是对象时，install方法会被调用，常用于注册全局组件和实例方法；若是函数，则直接执行。例如，在ElementUI中，Vue.use()用于注册组件和实例方法。通过这种方式，开发者可以方便地扩展Vue的功能。

vue.use()执行完干了什么，一文给你搞懂

当初死记硬背的时候就知道他是执行了install，我当时理解为和npm install 一样现去下载一下，就是不明白为啥会这样运行，然后去翻阅一下资料才发现，理解的驴唇不对马嘴，下面是正解

如果use的是一个js对象，将执行对象内的install方法

如果use的是一个js的function，直接执行function

作用：可以再vue原型上挂载一些实例，注册全局组件

例子1、注册全局组件并在对象上挂载数值

import HelloWorld from '@/components/HelloWorld.vue'
export default {
  /**vue执行这里的install时候自动传入两个参数第一个是vue实例，第二个是配置项option */
  install: function (Vue,option) {
    // 这里的Vue就是你调用install方法时传递过来的
    // 可以在Vue原型中加一些东西
    Vue.prototype.$num = 123
    // 注册全局组件
    Vue.component(HelloWorld.name, HelloWorld)
  }
}

2、mian.js中调用

import components from '@/assets/components.js'
/**这里自动执行js文件的install方法 */
Vue.use(components)

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

当然在ElementUI 中也可以单独使用每个组件，所以ElementUI 在每个组件都有一个单独install暴露，这样使用vue.use即可按需引用

插件传入的如果是一个对象，则执行其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-router》

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