Vue.use中都发生了什么？

源码地址: https://github.com/vuejs/vue/blob/dev/src/core/global-api/use.js

定义

vue.use()往全局注入一个插件，供全局真接使用, 不需要单独引用

代码理解:

import Router from 'vue-router'
// 入口文件全局注入vue-router, 从而可以在全局使用this.$route
Vue.use(Router)
// 如果不使用vue.use 那么需在组件中使用都得单独引入
// a.vue
import Router from 'vue-router'

// b.vue
import Router from 'vue-router'

理解了其基本使用及作用，我们来看一下vue.use中都发生了什么

源码很少，所以直接摘抄了

Vue.use = function (plugin: Function | Object) {  
  // flow语法, 检测参数是否是函数或对象
  // 拿到已安装插件列表
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))

  // 如果已经安装，直接跳出方法
  if (installedPlugins.indexOf(plugin) > -1) {
    return this
  }

  // additional parameters
  // 取vue.use() 传入的参数
  const args = toArray(arguments, 1)

  // 将vue对象填充到第一位, 最后的结构为[vue,arg1,arg2,...]
  args.unshift(this)

  // 判断插件是否有install方法，如果有执行install方法，如果没有直接把插件当install执行
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
    plugin.apply(null, args)
  }

  // 注册完成填充至已安装列表，保证每个插件只安装一次
  installedPlugins.push(plugin)
  return this
}

结合代码理解

// 代码摘抄自elementui入口文件
// 实现上就是在install中执行了全局注册的操作
// index.js
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });
  // ...
}

export default {
  version: '2.5.4',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  ...
}

//  main.js
import demo from './idnex'
vue.use(demo)

总结

vue.use()为注册全局插件所用，接收函数或者一个包含install属性的对象为参数，如果参数带有install就执行install, 如果没有就直接将参数当install执行, 第一个参数始终为vue对象, 注册过的插件不会重新注册

本文由创作，采用知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2021/12/31 08:33