(编辑：jimmy 日期: 2024/11/18 浏览：2)
关于 vue.use 我们都知道些什么？
在做 vue 开发的时候大家一定经常接触 Vue.use() 方法，官网给出的解释是: 通过全局方法 Vue.use() 使用插件；我觉得把使用理解成注册更合适一些，首先看下面常见的注册场景。
import Router from 'vue-router' Vue.use(Router) import Vuex from 'vuex' Vue.use(Vuex) import Echarts from 'echarts' Vue.prototype.$echarts = Echarts
关于 echarts 的注册很简单，直接挂在 Vue 方法的原型上，通过原型链继承的关系可以在任意一个组件里通过 this.$echarts 访问到 echarts 实例，我们来写一个简单的例子证明一下。
function myVue(title){
this.title = title
}
myVue.prototype.myUse = '在原型上添加公共属性'
const A = new myVue('我是实例A')
const B = new myVue('我是实例B')
console.log(A.title, B.title, A.myVue, B.myVue, )
// 我是实例A 我是实例B 在原型上添加公共属性 在原型上添加公共属性
而 Router 和 Vuex 的注册就要去分析 Vue.use() 的源码了，在分析源码之前先总结一下官方对 Vue.use() 方法的说明：
官网说 Vue.use() 是用来使用插件的，那么传入的 Router 和 Vuex 就是这里指的插件，而这个插件本质上又是一个 install 方法。至于 install 方法内部实现了什么逻辑就由插件自身的业务决定了。
源码分析
首先说一下 Flow，vue源码中那些奇怪的写法 Vue.use = function (plugin: Function | Object) 是 Flow 的语法，Flow 是 facebook 出品的 JavaScript 静态类型检查工具。JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码，在编译期甚至看上去都不会报错，但在运行阶段就可能出现各种奇怪的 bug。
下面我们正式开始分析源码，Vue.use() 的源码很简单30行都不到，首先看 src/core/global-api/use.js 下 Vue.use() 方法的定义：
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
上面源码中使用了工具函数 toArray ，该函数定义在 src/shared/util.js
export function toArray (list: any, start"color: #ff0000">Vue.use()有什么用
在 install 里我们可以拿到 Vue 那么和 Vue 相关的周边工作都可以考虑放在 Vue.use() 方法里，比如：
echarts 用 Vue.use() 来注册
main.js
import Vue from 'vue'
import echarts from './echarts.js'
Vue.use(echarts)
new Vue({
...
})
echarts.js
import Echarts from 'echarts'
export default {
install(Vue){
Vue.prototype.$echarts = Echarts
}
}
这样写的好处是可以在 install 的文件里做更多配置相关的工作，main.js 不会变的臃肿，更方便管理。
全局组件用 Vue.use() 来注册
base.js
import a from './a'
import b from './b'
let components = { a, b }
const installBase = {
install (Vue) {
Object.keys(components).map(key => Vue.component(key, components[key]))
}
}
main.js
import Vue from 'vue'
import base from './base.js'
Vue.use(base)
new Vue({
...
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。