源码分析之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进行批量注册，简化代码。

// @component/index.js
import A from './A'
import B from './B'
import C from './C'
 
export default {
  install (Vue) {
    Vue.component(A.name, A)
    Vue.component(A.name, A)
    Vue.component(A.name, A)
  }
}

// @/main.js
import Common from '@components/index.js'
Vue.use(Common)

// 批量全局注册场景 - 优化
const importFn = require.context('./', false, /\.vue$/)
export default {
  install (Vue) {
    // 批量注册全局组件
    importFn.keys().forEach(key => {
      // 1. 导入组件
      const component = importFn(key).default
      // 2 注册组件
      Vue.component(component.name, component)
    })
  }
}

五、结语

读到这里，相信读者对Vue.use()有了一定的理解

👍👍👍有收获，点个赞鼓励一下！

🌟🌟🌟收藏文章，方便回看哈！

💬💬💬评论交流，互相进步！