Vue.use的原理和设计源码探究
作者：给小叶倒茶
前言
这段时间打算回顾一下Vue的全局方法，脑海里第一个跳出来的方法就是Vue.use，之所以会首先想到它，我觉得和我平时看的面试题相关~~~
Vue.use的原理是面试中常问的点，因为相对于其他全局方法，Vue.use源代码逻辑清晰，如果了解它，也就代表这个人是看过Vue源码的！！！
基本使用
在Vue官网中是这样说明的：通过全局方法 Vue.use(plugin) 使用插件
首先要知道什么是插件，插件通常用来为 Vue 添加全局功能（过滤器、指令、组件），平时我们使用的UI组件、Axios、Vuex都是插件
Vue.use装载插件的方式也很简单
import Vue from "vue" import Element from 'element-ui' Vue.use(Element)
并且在Vue官网还介绍了我们如何去开发插件，只需要暴露一个install方法就可以，在如果Vue.use方法使用插件时，会主动调用install方法
install方法第一个参数是Vue构造函数，剩下的参数则是调用Vue.use方法时，除第一个参数以外的剩余参数
import Vue from "vue"
let MyPlugin = {
install(_Vue) {
console.log(_Vue === Vue) // true
}
}
Vue.install(MyPlugin)
源码解析
废话不说，直接上源码~~~
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) {
// this是Vue构造函数
// _installedPlugins保存了已经被过使用插件
const installedPlugins = this._installedPlugins || (this._installedPlugins = [])
// 判断当前插件是否已经被使用过
if (installedPlugins.indexOf(plugin) > -1) {
// 如果已经被使用，就直接返回Vue构造函数
return this
}
// 获取排除第一个参数之后所剩余的参数
const args = toArray(arguments, 1)
// 向头部添加Vue构造函数
args.unshift(this)
// 如果 plugin.install 是方法
if (isFunction(plugin.install)) {
// 执行plugin.install方法
plugin.install.apply(plugin, args)
}
// 如果 plugin 是函数
else if (isFunction(plugin)) {
// 执行plugin.install函数
plugin.apply(null, args)
}
// plugin已经被使用过了，添加到已使用缓存中
installedPlugins.push(plugin)
return this
}
}
源码不一定都很很难，像Vue.use源码是不是就很简单
我们从源码中得到以下信息：
Vue.use会防止重复加载同一个插件Vue.use可以链式调用plugin只有类型是函数或者对象的时候才有用，为函数时，直接运行这个函数；当为对象时，会判断对象中是否存在install方法，如果存在，就执行这个方法
控制反转
谈论了Vue.use使用和原理，那再讲一讲设计吧~~~
我们从框架设计者的角度出发，现在需要允许Vue插件，你会怎样设计喃？
function show() {
console.log("我是插件");
}
现在需要把show方法添加到Vue原型上，如果没有提供Vue.use方法，那就会这样，开发者手动添加到原型上
function show() {
console.log("我是插件");
}
Vue.prototype.show = show
显然这样是不对，如果明天在有show2方法喃？不可能让开发自己加呀，你就首先提出了Vue.use方法帮助开发者加载插件
Vue.use = function (plugin) {
if (typeof plugin === "object") {
if (plugin.add) {
plugin.add()
}
if (plugin.use) {
plugin.use()
}
} else {
}
}
但是这又遇到一个难题，插件的类型多种多样，有些插件暴露的是add方法，有些时候use，不可能都要适配吧！！！
所以这个时候你就通知所以插件开发商，让他们插件都要向外暴露install方法，没有这个方法的我们不管，所以问题也都解决了
回到正题，谈设计，原本需要开发者实现的业务，交给了Vue本身，开发者只需要提供插件，这种设计叫做控制反转
也就是把代码的控制权从开发者交给Vue本身，如果Vue.use注入插件也叫做依赖注入
以上就是Vue.use的原理和设计源码探究的详细内容，更多关于Vue.use原理设计的资料请关注脚本之家其它相关文章！