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 函数来处理  
  
  
  
  
 。