Vue 插件及Vue.use源码分析

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者属性。如: vue-custom-element

2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch

3. 通过全局混入来添加一些组件选项。如 vue-router

4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

使用插件

import {MyPlugin} from "MyPlugin"
Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

开发插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

或者插件直接暴露一个函数方法

export default function (Vue, options) {
  //...
}

源码分析

path: vue-dev/src/core/global-api/use.js

/* @flow */

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

 // 初始化 Vue.use 方法
  export function initUse (Vue: GlobalAPI) {
    // 绑定全局Vue.use方法，(plugin: Function | Object)通过flow做类型检查，参数类型为Function | Object
    Vue.use = function (plugin: Function | Object) {
      // Vue._installedPlugins绑定数组，存储已经执行的插件，保证插件只install一次，防止插件被多次use
      const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
      // 如果插件被多次use，则return this
      if (installedPlugins.indexOf(plugin) > -1) {
        return this
      }

      /**
       * toArray处理arguments
       * 如 Vue.use(Plugin, {params: true})
       * args = [Vue, {params: true}]
       */
      const args = toArray(arguments, 1) // [{params: true}]
      args.unshift(this) // [Vue, {params: true}]
      //如果Plugin.install存在即执行，否则如果Plugin是一个函数，则执行。并且传入args参数
      if (typeof plugin.install === 'function') {
        plugin.install.apply(plugin, args)
      } else if (typeof plugin === 'function') {
        plugin.apply(null, args)
      }
      // installedPlugins 把use完成的插件放入插件池
      installedPlugins.push(plugin)
      return this
    }
  }

path: vue-dev/src/shared/util.js

// toArray

// 返回一个新数组并删除原数组前start个元素
  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
  }