vue插件源码解析

1. 使用

1.1 官网地址

官方文档戳这

1.2 插件使用方式

let MyPlugin = {
  install(Vue, args) {
    //逻辑...
  }
};

let MyPlugin2 = function(Vue, args) {
  //逻辑...
};

Vue.use(MyPlugin, {
  options: "MyPlugin1"
});

Vue.use(MyPlugin2, {
  options: "MyPlugin2"
});

1.3 demo

    
    
    
    



    

        
{{foo}}
    
    

2. 源码

/* @flow */

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

export function initUse (Vue: GlobalAPI) {

  Vue.use = function (plugin: Function | Object) { //这里能看到Vue.use传入的plugin可以是函数也可以是对象
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) { //自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
      return this
    }

    // additional parameters
    // Vue.use(MyPlugin, arg)
    // install(Vue)
    const args = toArray(arguments, 1) //获取Vue.use(plugin, args)中的args，args是用户传入的自定义配置项
    args.unshift(this) // 往args前面插入当前Vue对象，所以后续的回调函数的第一个参数就是这个Vue对象
    if (typeof plugin.install === 'function') {//如果传入的plugin.install 是函数类型，则回调这个install函数
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') { //如果传入的plugin本身是函数类型，直接回调plugin函数本身
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin) //installedPlugins 缓存传入的plugin
    return this
  }
}

2.1 源码所在文件位置

src/core/global-api/use.js

3 后续

本文简单的记录了学习vue源码的过程中，关于插件相关源码的解读。文章中如果有任何的错误，欢迎拍砖！