源码分析之Vue.use原理与作用

一、概述

在日常的开发中，我们常常使用Vue.use(plugin)进行插件的注册。例如：

// 全局注册 ElementUI
import ElementUI from 'element-ui' 
import 'element-ui/lib/theme-chalk/index.css' 

Vue.use(ElementUI);

二、用法

语法：Vue.use(plugin)

参数：

• 若参数是一个对象，必须提供 install 方法
• 若参数是一个函数，自身会被当做install方法，方法调用的时候，会将vue作为参数传入
• 若传入多参数，则除首参Vue实例供install函数使用外，其余参数传至插件内部使用

注意：

1. 插件的 install 方法会默认接收第一个参数为Vue实例
2. 该方法需要在调用 new Vue() 之前被调用
3. Vue.use 会自动阻止相同插件多次注册情况，多次调用则只注册一次

三、源码分析

• 第一步：传入 函数 or 对象
• 第二步：获取已注册的插件
• 第三步：判断插件是否已注册，防止重复注册
• 第四步：在参数中第一位插入Vue，保证第一个参数是Vue实例
• 第五步：调用插件的install方法，并传入Vue实例
• 第六步：注册插件

// 注：源码版本：v2.6.11
import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
  // 1. 要求传入函数或对象
  Vue.use = function (plugin: Function | Object) {8
    // 2. 获取已注册的插件
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // 3. 判断插件是不是已经注册过，防止重复注册
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    // 获取传入Vue.use的XX系列参数 Vue.use(plugin,XX,XX)
    const args = toArray(arguments, 1)
    // 4. 在参数中第一位插入Vue，保证第一个参数是Vue实例
    args.unshift(this)
    // 5. 调用插件的install方法，并传入Vue实例
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    // 6. 注册插件
    installedPlugins.push(plugin)
    return this
  }
}

四、总结

总之，实际项目开发中推荐使用install批量注册，更多相关信息读者自行查阅~