Vue.use的原理和设计源码探究

 import Vue from "vue"
 import Element from 'element-ui'
 Vue.use(Element)

 import Vue from "vue"
 let MyPlugin = {
     install(_Vue) {
         console.log(_Vue === Vue)       // true
     }
 }
 Vue.install(MyPlugin)

 import type { Globalapi } from 'types/global-api'
 import { toArray, isFunction } from '../util/index'
 export function initUse(Vue: GlobalAPI) {
     // plugin：类型是 Function|any
   Vue.use = function (plugin: Function | any) { 
     // this是Vue构造函数
     // _installedPlugins保存了已经被过使用插件
     const installedPlugins = this._installedPlugins || (this._installedPlugins = []) 
     // 判断当前插件是否已经被使用过
     if (installedPlugins.indexOf(plugin) > -1) {
       // 如果已经被使用，就直接返回Vue构造函数
       return this
     }
     // 获取排除第一个参数之后所剩余的参数
     const args = toArray(arguments, 1)
     // 向头部添加Vue构造函数
     args.unshift(this)
     // 如果 plugin.install 是方法
     if (isFunction(plugin.install)) {
       // 执行plugin.install方法
       plugin.install.apply(plugin, args)
     } 
     // 如果 plugin 是函数
     else if (isFunction(plugin)) {
       // 执行plugin.install函数
       plugin.apply(null, args)
     }
     // plugin已经被使用过了，添加到已使用缓存中
     installedPlugins.push(plugin)
     return this
   }
 }

 function show() {
     console.log("我是插件");
 }

 function show() {
     console.log("我是插件");
 }
 Vue.prototype.show = show

 Vue.use = function (plugin) {
     if (typeof plugin === "object") {
         if (plugin.add) {
             plugin.add()
         }
         if (plugin.use) {
             plugin.use()
         }
     } else {
     }
 }