详细讲解vue.use全局API源码

1. 前言

最近在编写前端项目底层的时候，发现我们在导入其他UI库的时候，都会执行vue.use()进行挂载，比如全部导入antd、element UI库

//antd
import Vue from 'vue';
import Antd from 'ant-design-vue';
Vue.use(Antd);

//element
import Vue from 'vue';
import ElementUI from 'element-ui';;
Vue.use(ElementUI);

之后我们就可以全局引用他们内部的所有组件

2.vue.use在vue中的使用

在vue官方文档插件一章中，详细介绍use方法是用来使用插件的功能，插件通常为vue添加全局功能的，比如以下：

1. 添加全局的方法和属性
2. 添加全局的资源，如全局组件、全局过滤器、全局的指令
3. 全局来混入添加一些组件选项
4. 添加vue实例方法，vue.prototype.$const

当我们开发插件的时候，就需要使用use方法进行注册，代码如Vue.use(myPlugin),其中的myPlugin可以是function | object，object需要提供一个install方法，我们编写自己的插件代码如下

//1.plugins.js
export default (Vue)=>{
    //全局方法
  Vue.myGlobalMethod = function(){}
  //全局指令资源
  Vue.directive('copy',{
        bind:function(){}
  })
  //组件选项
  Vue.mixin({
   create:function(){}
  })
    //实例方法
  Vue.prototype.$const = function(){}
}
//2.注册使用
import plugins from './plugins.js
Vue.use(plugins)
//3.支持链式调用
Vue.use(router).use(plugins)

再思考一下，我们可以直接在入口文件直接写这些的代码的

//比如注册实例方法
//main.js
import Vue from 'vue'
vue.prototype.$const = function(){}
new Vue()

确实我们不使用use方法进行注册也是可以实现，但是如果你的项目很大的时候，main.js文件会变得非常臃肿，可读性极差，而且现在是模块化开发时代了；不过这样也给了我们提示来思考use源码，1.直接执行插件内部的函数，2.返回Vue构造方法；use还有一个作用是插件只注册一次之后就不在注册，为了想清楚其中的原理，我们去找一下vue源码的中use实现来讲解

3. vue.use源码

下面直接贴上vue.use源码：

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.use = function (plugin: Function | Object) {
    //给Vue构造方法添加一个安装插件属性，用来记录安装过的插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    //如果插件已经存在了，直接返回Vue构造方法
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    // 将实际参数类数组转换成数组
    const args = toArray(arguments, 1)
    // 往首位添加Vue构造方法
    args.unshift(this)
    //判断传递过滤的插件是函数还是一个数组，直接进行执行
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    //添加到Vue构造方法的安装属性中
    installedPlugins.push(plugin)
    //返回Vue构造方法，方便链式调用
    return this
  }

以上就是vue.use的全部源码，比较简短，内部的思想我们可以学以致用。附上源代码地址：github.com/vuejs/vue/b…