Vue.use()的作用及原理

点击打开视频讲解

 在Vue中引入使用第三方库通常我们都会采用import的形式引入进来

但是有的组件在引入之后又做了Vue.use()操作

有的组件引入进来又进行了Vue.prototype.$axios = axios

那么它们之间有什么联系呢？ 

例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？
因为 axios 没有 install。

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()什么时候使用？

 ElementUI、VueRouter等官方插件的使用

在vue官方社区中提供了一系列辅助开发的插件，其中就有很多插件具有install方法，

比如ElementUI和VueRouter，我们使用Vue.use()进行引入。 

 import Vue from 'vue'

import VueRouter from 'vue-router';

import Element from 'element-ui'



Vue.use(VueRouter);

Vue.use(Element); 

 自定义插件，并提供install方法

除了使用官方的插件，我们也可以自定义一些含有install方法的插件或函数插件 

src\main.js

 import Vue from 'vue'

import App from './App.vue'

//引入ElementUI组件库

import ElementUI from 'element-ui';

//引入ElementUI全部样式

import 'element-ui/lib/theme-chalk/index.css';



import {Plugin1,Plugin2} from './plugins/plugins.js'



Vue.config.productionTip = false



//使用ElementUI

Vue.use(ElementUI)



Vue.use(Plugin1,'参数1')



Vue.use(Plugin2,'参数2')



new Vue({

  render: h => h(App),

}).$mount('#app') 

src\plugins\plugins.js

 // 对象形式

const Plugin1 = {



    install(Vue,b){

  

      console.log('Plugin1 第一个参数：',Vue)

  

      console.log('Plugin1 第二个参数：',b)

  

    }

  

  }



// 函数形式

function Plugin2(Vue,b){



    console.log('Plugin2 第一个参数：',Vue)



    console.log('Plugin2 第二个参数：',b)



}



export{ Plugin1, Plugin2 } 

效果：

Vue.prototype作用

 vue.prototype是一种注册全局变量的方式，使用vue.prototype的变量可以全局访问。

最典型的例子就是axios。 

 import axios from 'axios';

Vue.prototype.$http = axios; 

注册了axios之后就能在项目的位置使用了，使用的方法：
调用this.$http进行访问。

实际上我们还要注意，使用Vue.prototype注册的全局变量前面都要加上$符号，这是一种规范，主要是为了防止命名冲突。

Vue.use()和Vue.prototype的区别

Vue.use()用于注册具有install方法的变量，注册后install函数会自动调用，使得install的具体变量能够全局使用，包括全局变量，全局标签等等。

而Vue.prototype就是一个注册全局变量的方法，注册的全局的变量以$开头，调用this方法调用。

Vue.use()总结

通过以上分析我们可以知道，在我们以后编写插件的时候可以有两种方式。

一种是将这个插件的逻辑封装成一个对象，最后将在 install 编写业务代码暴露给 Vue 对象。这样做的好处是可以添加任意参数在这个对象上方便将 install 函数封装得更加精简，可拓展性也比较高。推荐使用object；

还有一种则是将所有逻辑都编写成一个函数暴露给 Vue。

其实两种方法原理都一样，无非第二种就是将这个插件直接当成 install 函数来处理。

如果对您有帮助，请点击链接跳转到B站一键三连哦！感谢支持！