Vue源码学习之插件原理

1、简介

插件为Vue添加全局功能，其功能范围包含

• 添加全局方法或者property
• 添加全局资源
• 通过全局混入来添加一些组件选项
• 添加Vue实例方法，通过添加到Vue.prototype上。
• 提供自己的API，同时提供上面提到的一个或者多个功能 

2、原理

Vue使用Vue.use来添加插件。其函数定义在src/core/global-api/use.ts文件中

  Vue.use = function (plugin: Function | any) {
    const installedPlugins =
      this._installedPlugins || (this._installedPlugins = [])
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (isFunction(plugin.install)) {
      plugin.install.apply(plugin, args)
    } else if (isFunction(plugin)) {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }

其会将plugin添加到this._installedPlugins中。如果已经添加过，直接返回。

其处理步骤包含如下：

1. 处理参数时，将第一个参数替换为this。
2. 如果插件提供的install为函数，则调用intall函数。
3. 如果传递的plugin本身为函数，则调用plugin函数
4. 将plugin添加到_installedPlugins中