Vue.use() 使用学习，源码学习

Vue全局注册

我就是好奇，vue.use(object|function,……)，他可以接收那么多种类型的参数，他接收了之后进行了什么操作呢，就对这些数据进行分别的注册了

// 这些大家或许都用过，我也用过但是我啥也不懂，看了源码懂了一点点，哈哈
// 这里借用别人的栗子说一下
const Plugin1 = {
    install(a, b, c) {
        console.log('Plugin1 第一个参数: ', a);
        console.log('Plugin1 第二个参数: ', b);
        console.log('Plugin1 第三个参数: ', c);
    },
};

function Plugin2(a, b, c) {
    console.log('Plugin2 第一个参数: ', a);
    console.log('Plugin2 第二个参数: ', b);
    console.log('Plugin2 第三个参数: ', c);
}

Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');

new Vue({
    el: '#app',
    router,
    render: h => h(App),
});

// 控制台输出的结果
// Plugin1 第一个参数: Vue$3(options) {……  一个Vue构造函数
// Plugin1 第二个参数: 参数1
// Plugin1 第三个参数: 参数2

// Plugin2 第一个参数: Vue$3(options) {……  一个Vue构造函数
// Plugin2 第二个参数: 参数A
// Plugin2 第三个参数: 参数B

一脸懵

• 两个都会打印出来，这个install函数和没有install函数有什么区别呢？
• 第一个参数为一个Vue对象是为什么呢？
• Vue怎么实现将后面的参数给第一个函数赋值的呢？

源码

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

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) // 得到当前Vue注册表
    if (installedPlugins.indexOf(plugin) > -1) { //判断是不是已经注册过，避免多次调用
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1) // 将arguments转化成数组，从下标1开始
    args.unshift(this) 
    // 给这个数组传一个Vue对象这样的话你可以对Vue构造函数的原型进行一些操作，比如像Vue.prototype.$shashasha，注册一些全局的东西，$是为了区别于其他的一些属性和方法
    // 比如说如果在全局你注册了一个isArray方法，但是没有用$符号，然后你在写组件的时候在method里面定义了一个方法也是isArray，那你这个时候this.isArray就没办法拿到全局注册的方法
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
      // plugin对象如果有install函数，则执行install
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
      // 如果plugin是一个函数，那就执行plugin
    }
    installedPlugins.push(plugin) // 将这个plugin添加到注册表
    return this
  }
}

// 这里我一直又一个误区，就是我以为注册的话是将plugin注册到vue里面，然后你可以在任何地方使用，this.plugin，好了，其实就是要执行一下plugin而已啦

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
}