Vue.use(plugin)详解

阅读此文章，你可以了解到：

Vue.use(plugin)基础概念（什么是Vue.use(plugin)）

Vue.use的简单使用

为什么在引入Vue-Router、ElementUI的时候需要Vue.use()？而引入axios的时候，不需要Vue.use()?

Vue-Router、ElementUI在Vue.use()分别做了什么？

Vue.use原理

如何编写一个Vue插件？

什么是Vue.use(plugin)

Vue.use是用来安装插件的。

用法：

Vue.use(plugin)

如果插件是一个对象，必须提供install方法。

如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

Vue.use(plugin)调用之后，插件的install方法就会默认接受到一个参数，这个参数就是Vue（原理部分会将）

该方法需要在调用new Vue()之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。(源码解析的时候会解析如何实现)

总结：Vue.use是官方提供给开发者的一个api，用来注册、安装类型Vuex、vue-router、ElementUI之类的插件的。

Vue.use的简单使用

看一下具体的例子：

我们在用Vue-cli3.0里面初始化项目的时候，会生成一个入口文件main.js

在main.js中，如何我们安装了Vue-Router、Vuex、ElementUI，并且想要在项目中使用，就得在入口文件main.js中调用一下Vue.use()

Vue.use(ElementUi);Vue.use(Vuex);Vue.use(Router);复制代码

这样就算是完成了对三个插件的安装，我们就可以在组件中调用this.$router、this.$route、this.$store、this.$alert()(ElementUI的弹窗组件)参数(方法)。

为什么在引入Vue-Router、Vuex、ElementUI的时候需要Vue.use()？而引入axios的时候，不需要Vue.use()?

我们在讲什么是Vue.use的时候，已经说明要用use安装的插件，要么是一个对象里面包含install方法，要么本身就是一个方法(自身就是install方法)。

也就是说，这个题目的答案，本质就是：Vue-Router、Vuex、ElementUI三者都具有install方法，并且插件的运行依赖于install方法里的一些操作，才能正常运行，而axios没有install方法也能正常运行。

看到这里你一定会疑惑：

同样是插件，为什么有些插件要有install方法才能正常运行（如VueRouter），有一些却可以没有install方法也可以使用（如axios）？

插件的install方法，可以为我们做什么？

Vue-Router、ElementUI在install里面到底做了什么？

在探究这个问题之前，我们先看看Vue.use这个方法到底做了什么。

Vue中的use原理

exportfunctioninitUse(Vue: GlobalAPI){  Vue.use =function(plugin: Function | Object){// 获取已经安装的插件constinstalledPlugins = (this._installedPlugins || (this._installedPlugins = []))// 看看插件是否已经安装，如果安装了直接返回if(installedPlugins.indexOf(plugin) >-1) {returnthis}// toArray(arguments, 1)实现的功能就是，获取Vue.use(plugin,xx,xx)中的其他参数。// 比如 Vue.use(plugin,{size:'mini', theme:'black'})，就会回去到plugin意外的参数constargs = toArray(arguments,1)// 在参数中第一位插入Vue，从而保证第一个参数是Vue实例args.unshift(this)// 插件要么是一个函数，要么是一个对象(对象包含install方法)if(typeofplugin.install ==='function') {// 调用插件的install方法，并传入Vue实例plugin.install.apply(plugin, args)    }elseif(typeofplugin ==='function') {      plugin.apply(null, args)    }// 在已经安装的插件数组中，放进去installedPlugins.push(plugin)returnthis}}复制代码

总结:

Vue.use方法主要做了如下的事：

检查插件是否安装，如果安装了就不再安装

如果没有没有安装，那么调用插件的install方法，并传入Vue实例

我们知道了Vue.use做了什么之后。我们看看那些我们常见的插件，是如何利用这个use方法的。

Element中的install

constinstall =function(Vue, opts = {}){  locale.use(opts.locale);  locale.i18n(opts.i18n);// components是ElementUI的组件数组，里面有Dialog、Input之类的组件// 往Vue上面挂载组件components.forEach(component=>{    Vue.component(component.name, component);  });  Vue.use(Loading.directive);// 自定义一些参数Vue.prototype.$ELEMENT = {size: opts.size ||'',zIndex: opts.zIndex ||2000};// 在Vue原型上注册一些方法，这就是为什么我们可以直接使用this.$alert、this.$loading的原因，值就是这么来的。Vue.prototype.$loading = Loading.service;  Vue.prototype.$msgbox = MessageBox;  Vue.prototype.$alert = MessageBox.alert;  Vue.prototype.$confirm = MessageBox.confirm;  Vue.prototype.$prompt = MessageBox.prompt;  Vue.prototype.$notify = Notification;  Vue.prototype.$message = Message;};复制代码

同样的方法，我们来看看Vue-Router的install又做了什么。

Vue-Router中的install

我们先把这个install方法的部分拆解出来，只关注其最最核心的逻辑

如果不想读源码，可以直接看源码后面的文字简单总结

importViewfrom'./components/view'importLinkfrom'./components/link'exportlet_Vueexportfunctioninstall(Vue){  _Vue = VueconstisDef =v=>v !==undefinedconstregisterInstance =(vm, callVal) =>{leti = vm.$options._parentVnodeif(isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {      i(vm, callVal)    }  }  Vue.mixin({    beforeCreate () {// 如果该组件是根组件if(isDef(this.$options.router)) {//  设置根组件叫_routerRootthis._routerRoot =this// 根组件的_router属性为，new Vue传进去的router// $options是在mains.js中，new Vue里的参数，在这里我们传入的参数，this._router =this.$options.routerthis._router.init(this)// 通过defineReactive方法，来把this._router.history.current变成响应式的，这个方法的底层就是object.definePropertyVue.util.defineReactive(this,'_route',this._router.history.current)      }else{// 如果该组件不是根组件，那么递归往上找，知道找到根组件的。// 因为Vue渲染组件是先渲染根组件，然后渲染根组件的子组件啊，然后再渲染孙子组件。// 结果就是每一个组件都有this._routerRoot属性，该属性指向了根组件。this._routerRoot = (this.$parent &&this.$parent._routerRoot) ||this}      registerInstance(this,this)    },    destroyed () {      registerInstance(this)    }  })// 把自身$router代理为this._routerRoot（根组件的）的_router// 根组件的_router,就是new Vue传入的 router// 这样就实现了，每一个Vue组件都有$router、$route属性Object.defineProperty(Vue.prototype,'$router', {    get () {returnthis._routerRoot._router }  })// 同理，这样就是把自身的$route，代理到根组件传入的routeObject.defineProperty(Vue.prototype,'$route', {    get () {returnthis._routerRoot._route }  })// 注册 组件Vue.component('RouterView', View)// 注册组件Vue.component('RouterLink', Link)conststrats = Vue.config.optionMergeStrategies// use the same hook merging strategy for route hooksstrats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created}复制代码

总结：vue-router的install方法主要帮我们做了如下事情：

通过minxi混入的方式，如果自身是根组件，就把根组件的_router属性映射为new Vue传入的router实例(this.$options.router)。

如果自身不是根组件，那么层层往上找，直到找到根组件，并用_routerRoot标记出根组件

为每一个组件代理$router、$route属性，这样每一个组件都可以去到$router、$route

注册、组件

看到这里，你应该明白了，为什么vueRouter需要install才能使用了吧。

底层一点的理由就是，vueRouter需要在install方法，对Vue实例做一些自定义化的操作：比如在vue.prototype中添加$router、$route属性、注册组件

为什么axios不需要安装，可以开箱即用？

其实理由也很简单，跟上面需要install的相反的。因为axios是基于Promise封装的库，是完全独立于Vue的，根本不需要挂载在Vue上也能实现发送请求。

而因为VueRouter需要为我们提供$router、$routers之类的属性，要依赖与Vue或者操作Vue实例才能实现。

Vue.use实际上就是Vue实例与插件的一座桥梁。

来源链接：https://juejin.cn/post/6844903946343940104