Vue.use源码解析

 1 import { toArray } from '../util/index'
 2 
 3 export function initUse (Vue: GlobalAPI) {
 4   Vue.use = function (plugin: Function | Object) {
 5     const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
 6     if (installedPlugins.indexOf(plugin) > -1) {
 7       return this
 8     }
 9 
10     // additional parameters
11     const args = toArray(arguments, 1)
12     args.unshift(this)
13     if (typeof plugin.install === 'function') {
14       plugin.install.apply(plugin, args)
15     } else if (typeof plugin === 'function') {
16       plugin.apply(null, args)
17     }
18     installedPlugins.push(plugin)
19     return this
20   }
21 }

首先判断传入的参数plugin的属性是否已被注册，如果存在且逻辑值为真，那么直接返回，后边的代码就不会在执行。

我们先假设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
}

当执行toArray(arguments,1)，会生成一个新数组ret，长度 = arguments.length-1，然后进行while循环，依次倒序把arguments的元素赋值给ret,因为ret比arguments长度少1，所以最终等同于arguments把除了第一个元素外的其余元素赋值给ret。toArray主要作用就是把类数组转化为真正的数组，这样才能调用数组的方法。因为此处我只引入一个plugin参数，即arguments=[plugin]，所以toArray返回为空数组[]。

接着往下执行，args.unshift(this)，等同于[].unshift(Vue),即args = [Vue];

1 if (typeof plugin.install === 'function') {
2       plugin.install.apply(plugin, args)
3     } else if (typeof plugin === 'function') {
4       plugin.apply(null, args)
5     }
6     installedPlugins.push(plugin)

此处判断plugin的install是否为函数，如果为函数，立即执行pluign.install方法，install方法传入的参数为args内数组元素，即install接受的第一个参数为Vue.

如果plugin的install不是函数，那么判断plugin本身是否为函数，如果为函数，那么执行plugin函数，且参数为args内数组元素。

综上所述，Vue.use的作用其实就是执行一个plugin函数或者执行pluign的install方法进行插件注册，并且向plugin或其install方法传入Vue对象作为第一个参数，use的其他参数作为plugin或install的其他参数。

转载于:https://www.cnblogs.com/codejoker/p/10508823.html