Vue.use原理及实现

1. 用法

引用官方说法

Vue.use(plugin, ...args) : this

第一个参数应是插件本身，可选的第二个参数是要传递给插件的选项。 插件可以是一个带 install() 方法的对象，亦或直接是一个将被用作 install() 方法的函数。插件选项 (app.use() 的第二个参数) 将会传递给插件的 install() 方法。 若 app.use() 对同一个插件多次调用，该插件只会被安装一次

谈谈我的理解：

1. 方法第一个参数为plugin对象，剩余参数传入给plugin的install方法调用
2. plugin对象内部需定义一个install方法，第一个参数为Vue，剩余参数由上边传递过来
3. 若plugin本身定义为为一个函数，那么将被作为install方法调用

// 注册全局toster组件
import Toster from '@/components/toster.vue'

let gTosterPlugin = {
  install(Vue){
    Vue.components('Toster', Toster)
  }
}
Vue.use(gTosterPlugin) // 会调用gTosterPlugin.install方法并将this（即Vue）作为第一个参数

2.实现

“ Talk is cheap, show me the code ”

Vue.use = function (plugin, ...args) {
  if (!this._installedPlugins) this._installedPlugins = []

  if (this._installedPlugins.includes(plugin)) return this
  this._installedPlugins.push(plugin)

  args.unshift(this) // [Vue, arg1, ..., argN]

  if (plugin.install instanceof Function) plugin.install(...args)
  else if (plugin instanceof Function) plugin(...args)
  return this
}