Vue.use()和install怎么用(install,use,vue,开发技术)

Vue.use()和install用法

介绍

在vue的main.js中，我们经常使用Vue.use(xx)方法。比如我们引入elementUI，在main.js中，我们一般通过如下代码引入：

importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

为什么这样做？

官方解释

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。

install 方法调用时，会将 Vue 作为参数传入。什么意思呢？ Vue.use() 中的参数必须是一个function函数或者是一个Object对象，如果是对象的话，必须在对象中提供一个install方法。之后会将 Vue 作为参数传入。

总结：

如果Vue.use() 中的参数是一个function函数，那么函数的参数是Vue对象。

如果Vue.use() 中的参数是一个Object对象，那么这个对象必须提供一个install方法，install方法的参数就是Vue。

Vue.use为什么要使用install

疑问

Vue.use注册插件和Vue.prototype.xxx挂载方式有什么区别，使用Vue.use优势在哪，为什么使用Vue.use而不使用Vue.prototype.xxx

从源码分析

//Vue源码文件路径：src/core/shared/util.jsexportfunctiontoArray(list:any,start?:number):Array<any>{start=start||0leti=list.length-startconstret:Array<any>=newArray(i)while(i--){ret[i]=list[i+start]}returnret}

//Vue源码文件路径：src/core/global-api/use.jsimport{toArray}from'../util/index'exportfunctioninitUse(Vue:GlobalAPI){Vue.use=function(plugin:Function|Object){constinstalledPlugins=(this._installedPlugins||(this._installedPlugins=[]))if(installedPlugins.indexOf(plugin)>-1){//如果该插件已被注册，则不再进行注册returnthis}//additionalparametersconstargs=toArray(arguments,1)args.unshift(this)if(typeofplugin.install==='function'){plugin.install.apply(plugin,args)}elseif(typeofplugin==='function'){plugin.apply(null,args)}installedPlugins.push(plugin)returnthis}}

vue官网是这样说的

install方法应该就是解决防止插件多次注册的情况吧；如果使用Vue.prototype.xxx挂载，每使用一次就要重新挂载一次。