VUE2 全局 API use 方法源码详解

本篇文章源码参考：vue2 v2.6.12

Vue.use() 作用是什么？

我们来看一段官方文档对 Vue.use 的介绍。
简单来说它的作用是给你的应用程序添加额外的扩展功能，让你的项目锦上添花。

我们可以注意到两点：

• use() 参数为一个 plugin 支持两种类型 Object | Function，如果是 Object 的话那么这个对象里面必须包含 install 方法，如果是 Function 那么该函数会被直接当成 install 方法调用
• 即使你多次调用 use 安装同一个插件，最终只会安装一次。

Vue.use() 源码

use 方法源代码以及注释

/* @flow */

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
  // use 方法接收一个参数 plugin 参数类型可以为 Function 或 Object
  Vue.use = function (plugin: Function | Object) {
    // 定义一个记录已经安装了的插件数组列表
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // 如果 plugin 在安装数组里面存在则不再进行安装（不往后面执行）
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    // 得到除 plugin 之外的参数
    const args = toArray(arguments, 1)
    // 使 install 方法接收的第一个参数为 this 即 Vue
    args.unshift(this)
    // plugin 是一个对象且含有 install 方法
    if (typeof plugin.install === 'function') {
      // 调用函数 install 给 Vue 添加扩展功能
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') { 
      // plugin 为一个函数时
      // 调用函数 install 给 Vue 添加扩展功能
      plugin.apply(null, args)
    }
    // 将当前插件记录到已安装插件列表
    installedPlugins.push(plugin)
    // 返回 this 说明可以进行链式调用
    return this
  }
}

以上源码中用到的 toArray 工具方法源码

/**
 * EN-note:Convert an Array-like object to a real Array.
 * 将类数组对象转化为一个真实数组。 ps：start=1 表示只返回了除 plugin 之外的参数
 */
export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}

希望以上源码以及注释让你对 Vue.use() 方法有一个更深的了解

编写插件核心代码

通过以上源码我们已经知道了 use() 的执行逻辑，上面提及的 install 方法，它就是我们编写插件核心代码的地方。

install 方法内可以执行哪些操作？通过以上源码我们已经知道 install 方法的第一个参数是 Vue 构造函数，那么我们可以针对 Vue 做以下几种操作(非全部，具体参考官方文档)。

• 添加全局的方法或者属性

myPlugin.install = function(Vue, options){
    Vue.myFun = function( options ) {
        // 逻辑代码...
    }
}

• 添加全局资源：指令/组件/过滤器等等

// 自定义指令
myPlugin.install = function(Vue, options){
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
            // 逻辑代码...
        }
    })
}

• 给 Vue 实例添加方法

myPlugin.install = function(Vue, options){
    Vue.prototype.$myMethod = function(options){
        // 逻辑代码...
    }
}

• 添加一个功能库，如 vue-router

安装 vue-router 时它给应用程序注册了 router-view 、router-link 两个全局组件，并在 vue 实例上添加了相关的路由实例。