vue.use方法,vue.use() 是什么意思
我相信很多人在使用别人的组件时都会用到Vue.use()，比如Vue.use (vue路由器)、Vue.use(MintUI)。本文主要介绍Vue中Vue.use()的原理和基本用法，有需要的人可以参考一下。
目录
前言1。举个例子来理解
2.分析源代码
3.摘要
摘要
前言
我相信很多人在用Vue使用别人的组件时都会用到Vue.use()。例子包括Vue.use(VueRouter)和Vue.use(MintUI)。但是在使用axios的时候，可以不使用Vue.use(axios)直接使用。这是为什么呢？
因为axios没有安装。
1. 举例理解
在新项目中创建两个文件：plugins.js use.js:
//plugins.js
常量插件1={
安装(a，b){
Console.log(Plugin1第一个参数：，a)
Console.log(Plugin1第二个参数：，b)
}
}
函数插件2(a，b){
Console.log(Plugin2第一个参数：，a)
Console.log(Plugin2第二个参数：，b)
}
导出{插件1，插件2}
//use.js
从“vue”导入Vue
从导入{插件1，插件2}。/插件
Vue.use(插件1，“参数1”)
Vue.use(插件2，“参数A”)
//main.js
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器
“导入”。/资产/插件/使用
Vue.config.productionTip=false
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount(“# app”)
可以发现，plugin1中我们的install方法写的两个控制台是打印出来的，第一个是Vue对象，第二个是我们传入的参数。
另一方面，Plugin2没有安装方法。它本身就是一个方法，还可以打印两个参数。第一个是Vue对象，第二个是我们传入的参数。
现在我们对Vue.use有没有一个模糊的猜测~
2. 分析源码
排列源代码
将函数导出到数组(list: any，start？编号):数组{
start=start 0
let i=list.length - start
const ret: Arrayany=新数组(I)
while (i - ) {
列表[我开始]
}
返回ret
}
从导入{ toArray }./util/index
导出函数initUse (Vue: GlobalAPI) {
Vue.use=function(插件：函数对象){
const installedPlugins=(this。_installedPlugins (this。_installedPlugins=[]))
if(installed plugins . index of(plugin)-1){
归还这个
}
//附加参数
const args=toArray(arguments，1)
args.unshift(this)
if(type of plugin . install=== function ){
plugin.install.apply(插件，参数)
} else if(插件类型===函数){
plugin.apply(null，args)
}
installedPlugins.push(插件)
归还这个
}
}
从源代码中可以发现，vue首先判断这个插件是否已经注册过，不允许重复注册，接收到的插件参数的限制是Function Object。
这两种类型有不同的治疗方法。
首先，将我们传入的参数排列成一个数组：constargs=toarray (arguments，1)；
将Vue对象添加到这个数组args.unshift(this)的起始位置，这里this指向Vue对象；
如果我们传入的插件的安装(vue.use的第一个参数)是一个方法。也就是说，如果我们传入一个包含install方法的对象，那么我们调用这个插件的install方法，将排序后的数组作为参数传入install方法plugin.install.apply (plugin，args)；
如果我们传入的插件是一个函数，那么我们就直接调用这个函数，把排序后的数组作为参数传入，plugin.apply(null，args)；);
之后将这个插件添加到已经添加插件的数组中，表示installed plugins . push(plugin)；)已注册；
最后，返回Vue对象。
3. 小结
从上面的分析可以知道，以后写插件有两种方式。
一种是把这个插件的逻辑封装成一个对象，最后把install里面写的业务代码公开给Vue对象。这样做的好处是可以给这个对象添加任意参数，方便更简洁的封装install函数，具有更高的扩展性。
另一种是把所有的逻辑都写成一个函数，暴露给Vue。
其实两种方法的原理都是一样的，只不过第二种方法是直接把这个插件当做install函数。
个人认为第一种方式比较合理。
导出常量插件={
安装(Vue) {
Vue .组件.
Vue.mixins.
某视频剪辑软件.
//我们也可以在install中执行其他功能，Vue会把这个指向我们的插件。
console.log(this) //{install:实用程序：}
This.utils(Vue) //执行utils函数
console.log(这个。计数)//0
},
utils(Vue) {
某视频剪辑软件.
console.log(Vue) //Vue
},
计数：0
}
//我们可以给这个对象添加参数，最后Vue只会执行install方法，其他方法可以作为辅助函数封装install方法。
常量测试=测试
导出功能插件2(Vue) {
某视频剪辑软件.
console.log(测试)//test
//注意，如果把插件写成函数，Vue只会把这个指向null，而不是这个函数。
console.log(this) //null
}
//这样就只能在一个函数里写插件逻辑，所以封装性没那么强。
总结
关于Vue的原理和基本用法这篇文章就到这里了，Vue中的use()。更多关于vue.use()的原理和使用方法，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。