Vue.use原理及实现

1. 用法

引用官方说法 (opens new window)

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) {
  let installedPlugins = (this._installledPlugins || (this._installledPlugins = [])) // 已注册plugin列表
  if (installedPlugins.includes(plugin)) return this // 已注册
  let args = [...arguments].slice(1) // 有传入参数的情况：Vue.use(plugin, arg1, arg2) 
  args.unshift(this) // [Vue, arg1, arg2]

  if (typeof plugin.install == 'function') plugin.install.apply(plugin, args) // install(Vue, arg1, arg2)
  else if (typeof plugin == 'function') plugin.apply(null, args) // plugin本身作为install函数调用
  installedPlugins.push(plugin) // 添加到已注册插件列表，避免重复注册
  return this
}