Vue.use解析

Vue.use

  • 参数:
    {Object | Function} plugin
  • 用法
    安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
    该方法需要在调用 new Vue() 之前被调用。
    当 install 方法被同一个插件多次调用,插件将只会被安装一次。

源码解析

  • 入口文件 src/global-api/index
import { initUse } from './use'
// 注入use方法
initUse(Vue)
  • initUse 方法
import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
   // 绑定use方法
  Vue.use = function (plugin: Function | Object) {
    // 获取已经安装的插件列表
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))  
    // 判断插件是否重复注册
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
  
    // 获取额外参数
    const args = toArray(arguments, 1)
    args.unshift(this)
    // 判断参数类型
    if (typeof plugin.install === 'function') {
      // 调用install方法,并绑定this
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    // 添加插件到列表
    installedPlugins.push(plugin)
     //   返回Vue实例
    return this
  }
}

上面的代码可以看出,Vue.Use方法会调用插件对象的install方法(或者插件函数)。并将this传递给install函数作为第一个参数。

推荐阅读更多精彩内容