Kwin Huang

不会搞艺术的程序员不是好设计师.

vue.use相关学习

2020-02-10

背景

我们在写项目的时候, 最初的main.js文件里面, 经常会看见一些Vue.use(xxx)的写法, 比如Vue.use(Router), Vue.use(Antd)等等, 然后在项目中就能用对应的库或者插件了, 那么这个use到底是个什么东西呢

语法

vue.use(plugin, arguments)

参数: plugin(Function | Object)

用法:

vue安装的组件类型必须是Function 或者 Object

如果是 Object , 必须提供 install 方法

如果是个函数, 会被直接当做 install 函数来执行

install函数接受参数,默认第一个参数为Vue, 其后参数为注册组件时传入的arguments

举个🌰

首先新建两个文件plugin.js 和 index.js.

// 文件: src/plugins.js
const Plugin1 = {
  install(a, b, c) {
    console.log('Plugin1 第一个参数:', a);
    console.log('Plugin1 第二个参数:', b);
    console.log('Plugin1 第三个参数:', c);
  },
};
 
function Plugin2(a, b, c) {
  console.log('Plugin2 第一个参数:', a);
  console.log('Plugin2 第二个参数:', b);
  console.log('Plugin2 第三个参数:', c);
}
 
export { Plugin1, Plugin2 };
// 文件: src/index.js
import Vue from 'vue';
 
import { Plugin1, Plugin2 } from './plugins';
 
Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');

然后在入口文件 main.js 里面引入

// 文件: src/main.js
import Vue from 'vue';
 
import '@/classes/vue-use';
import App from './App';
import router from './router';
 
Vue.config.productionTip = false;
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

此时我们执行npm run dev打开8080端口开启开发调试工具可以看到控制台输出以下信息

从中可以发现我们在plugin1中的install方法编写的三个console都打印出来,第一个打印出来的是Vue对象,第二个跟第三个是我们传入的两个参数。

而plugin2没有install方法,它本身就是一个方法,也能打印三个参数,第一个是Vue对象,第二个跟第三个也是我们传入的两个参数。

分析源码

// Vue源码文件路径:src/core/global-api/use.js
 
import { toArray } from '../util/index'
 
export function initUse (Vue: GlobalAPI) {
 Vue.use = function (plugin: Function | Object) {
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  if (installedPlugins.indexOf(plugin) > -1) {
   return this
  }
 
  // additional parameters
  const args = toArray(arguments, 1)
  args.unshift(this)
  if (typeof plugin.install === 'function') {
   plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
   plugin.apply(null, args)
  }
  installedPlugins.push(plugin)
  return this
 }
}

从源码中我们可以发现vue首先判断这个插件是否被注册过,不允许重复注册。

并且接收的plugin参数的限制是Function | Object两种类型。

对于这两种类型有不同的处理。

首先将我们传入的参数整理成数组 => const args = toArray(arguments, 1)。

再将Vue对象添加到这个数组的起始位置args.unshift(this),这里的this 指向Vue对象

如果我们传入的plugin(Vue.use的第一个参数)的install是一个方法。也就是说如果我们传入一个对象,对象中包含install方法,那么我们就调用这个plugin的install方法并将整理好的数组当成参数传入install方法中。 => plugin.install.apply(plugin, args)

如果我们传入的plugin就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入。 => plugin.apply(null, args)

之后给这个插件添加至已经添加过的插件数组中,标示已经注册过 => installedPlugins.push(plugin)

最后返回Vue对象。

小结

通过以上分析我们可以知道,在我们以后编写插件的时候可以有两种方式。

一种是将这个插件的逻辑封装成一个对象最后将最后在install编写业务代码暴露给Vue对象。这样做的好处是可以添加任意参数在这个对象上方便将install函数封装得更加精简,可拓展性也比较高。

还有一种则是将所有逻辑都编写成一个函数暴露给Vue。

其实两种方法原理都一样,无非第二种就是将这个插件直接当成install函数来处理。

个人觉得第一种方式比较合理。