Vue.use原理及源码解读

vue.use（plugin, arguments） 语法

• 参数：plugin(Function | Object)
• 用法：
  如果vue安装的组件类型必须为Function或者是Object<br/>

  如果是个对象，必须提供install方法

  如果是一个函数，会被直接当作install函数执行

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

组件.js
    export const testObj = {
        install(Vue, arg) {
            
        }
    }
    export const testFn = founction(Vue, arg) {
        
    }
    
index.js
    import { testObj, testFn } from './组建.js'
    Vue.use(testObj, arg)
    Vue.use(testFn, arg)
    

建议组件采用第一种写法，根据use源码，当采用第二种写法时，this指针指向null

    if (typeof plugin.install === 'function') {
          plugin.install.apply(plugin, args)
        } else if (typeof plugin === 'function') {
          plugin.apply(null, args)
        }

官方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 Vue对象
     return this
   }
//调用`toArray`方法
   const args = toArray(arguments, 1)
   args.unshift(this)
//将Vue对象拼接到数组头部
   if (typeof plugin.install === 'function') {
//如果组件是对象，且提供install方法，调用install方法将参数数组传入，改变`this`指针为该组件
     plugin.install.apply(plugin, args)
   } else if (typeof plugin === 'function') {
//如果传入组件是函数，这直接调用，但是此时的`this`指针只想为`null` 
     plugin.apply(null, args)
   }
//在保存注册组件的数组中添加
   installedPlugins.push(plugin)
   return this
 }
}

toArray方法源码

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
}

原文地址：https://segmentfault.com/a/1190000017162947