Vue.use()的作用及原理

最近帮忙面试前端的时候，就随口一问，发现很多2年以上的vue开发者说不出vue.use()为什么用，什么时候用，原理是什么> 所以我整理一下网上的资源，写一篇毕竟容易理解的文章

在Vue中引入使用第三方库通常我们都会采用import的形式引入进来，但是有的组件在引入之后又做了Vue.use()操作，有的组件引入进来又进行了Vue.prototype.$something = something，那么它们之间有什么联系呢？

**

先说一下Vue.prototype，在Vue项目中通常我们引入axios来进行请求接口数据，通过npm安装之后我们只需在我们的文件中import axios from "axios"就可以使用，有时候我们会加上一句Vue.prototype.$axios = axios，prototype我们应该是再熟悉不过了 

Vue.prototype.

Vue.use是什么？

官方对 Vue.use() 方法的说明：通过全局方法 Vue.use() 使用插件，Vue.use 会自动阻止多次注册相同插件，它需要在你调用 new Vue() 启动应用之前完成，Vue.use() 方法至少传入一个参数，该参数类型必须是 Object 或 Function，如果是 Object 那么这个 Object 需要定义一个 install 方法，如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行，当 install 执行时第一个参数就是 Vue，其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法。

Vue.use() 的源码中的逻辑

**

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
 }
} 

在源码中首先限制了它传入的值的类型只能是Function或者Object，然后判断了该插件是不是已经注册过，防止重复注册，然后调用了该插件的install方法，源码中也有介绍到Vue.use()可以接受多个参数的，除第一个参数之后的参数我们都是以参数的形式传入到当前组件中。

Vue.use()什么时候使用？

它在使用时实际是调用了该插件的install方法，所以引入的当前插件如果含有install方法我们就需要使用Vue.use()，例如在Vue中引用Element如下：

**

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element) 

因为在Element源码中会暴露除install方法，所以才需要用Vue.use()引入。我们也可以在自己的vue项目中自己定义一个install方法，然后通过Vue.use()方法来引入测试一下：

**

const plugin = {install() {alert("我是install内的代码")},
}
import Vue from "vue"
Vue.use(plugin) // 页面显示"我是install内的代码" 

当我们打开页面就会弹出“我是install内的代码”提示。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取