一、Vue.use() 是什么

Vue.use()是Vue提供的一种使用插件的全局方法，也可以理解成插件全局注册的方法，是Vue实例与插件的一座桥梁

• 语法：Vue.use(plugin)

• 传参：plugin - {Object | Function} plugin

  • plugin是对象 Object，必须提供 install 方法
  • plugin是函数 Function，自身会被当做install方法，方法调用的时候，会将Vue作为参数传入

  Vue.use(plugin) 执行时 install 会默认执行，当 install 执行时第一个参数就是 Vue，其它参数是 Vue.use() 执行时传入的其它参数

• 使用场景：

  引入的当前插件是函数或是含有 install 方法的Object，我们就需要使用 Vue.use()。因为它在使用时实际调用了该插件的install方法。

  在 install 里我们可以拿到 Vue 那么和 Vue 相关的周边工作都可以考虑放在 Vue.use() 方法里，比如：

  • directive注册
  • mixin注册
  • filters注册
  • components注册
  • prototype挂载
  • ...

• 本质：Vue.use() 的注册本质上就是执行了一个 install 方法，install 里的内容由开发者自己定义

小结：

• 通过全局方法 Vue.use() 使用插件
• Vue.use() 会自动阻止重复注册相同插件
• 它需要在你调用 new Vue() 启动应用之前完成
• Vue.use() 方法至少传入一个参数，该参数类型必须是 Object 或 Function

示例：

// 使用简单示例：
import Router from 'vue-router'
Vue.use(Router)

import Vuex from 'vuex'
Vue.use(Vuex)

// 传参为Object和Function的示例：
// 文件 - vueUseDemo.js
const objectPlugin = {
  install(vue, options) {
    console.log("Vue.use的传参是对象:::");
    console.log("第一个传参Vue:", vue);
    console.log("第二个传参options:", options);
  },
};

function functionPlugin(vue, options) {
  console.log("Vue.use的传参是函数:::");
  console.log("第一个传参Vue:", vue);
  console.log("第二个传参options:", options);
}

export { objectPlugin, functionPlugin }

// 文件 - main.js
import Vue from 'vue'
import { objectPlugin, functionPlugin } from '@/utils/vueUseDemo'

Vue.use(objectPlugin, "对象插件的传参")
Vue.use(functionPlugin, "函数插件的传参")

效果截图：

二、Vue.use() 源码解析：

源码版本：Vue2.7.14

源码位置：src\core\global-api\use.ts

源码内容和解析：

import type { GlobalAPI } from 'types/global-api'
import { toArray, isFunction } from '../util/index'

export function initUse(Vue: GlobalAPI) {
  // plugin: Function | any ：限制传入值的类型
  Vue.use = function (plugin: Function | any) {
    // _installedPlugins 存储所有注册过的 plugin
    // 判断插件是否已经注册过，目的是为了防止重复注册
    const installedPlugins =
      this._installedPlugins || (this._installedPlugins = [])
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters => 可以接受多个参数，除第一个参数之后的参数我们都是以参数的形式传入到当前组件中。
    const args = toArray(arguments, 1)
    args.unshift(this)
    // isFunction(plugin.install) => 为true时，表示plugin是对象
    // isFunction(plugin) => 为true时，表示plugin是函数
    if (isFunction(plugin.install)) {
      // 直接调用该插件的install方法，将参数数组传入，改变`this`指针为该组件
      plugin.install.apply(plugin, args)
    } else if (isFunction(plugin)) {
      // 直接调用该插件自身执行
      plugin.apply(null, args)
    }
    // 将plugin存储到  installedPlugins，表示该插件已经注册过
    installedPlugins.push(plugin)
    return this
  }
}

小结：

通过源码了解到Vue.use主要做了两件事：

1. 检查插件是否已经注册，注册过得不需要重复注册
2. 没有注册的，调用插件的install方法, 并传入Vue实例

参考：