运维开发网

浅析Vue.use()的用法和install的用法

运维开发网 https://www.qedev.com 2022-04-18 14:34 出处:网络
这篇文章主要介绍了Vue.use()的用法和install的用法解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

这篇文章主要介绍了Vue.use()的用法和install的用法解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教


Vue.use()和install用法


介绍

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

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


为什么这样做?

官方解释

安装Vue.js插件。如果插件是一个对象,则必须提供安装方法。如果插件是一个函数,它将被用作安装方法。

当调用install方法时,Vue作为参数传入。你什么意思?Vue.use()中的参数必须是函数function或对象。如果是对象,则必须在对象中提供安装方法。之后,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.jsexport function toArray (list: any, start?: number): Arraylt;anygt; { start = start || 0 let i = list.length - start const ret: Arraylt;anygt; = new Array(i) while (i--) { ret[i] = list[i + start] } return ret}// Vue源码文件路径:src/core/global-api/use.jsimport { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedPlugins.indexOf(plugin) gt; -1) { // 如果该插件已被注册,则不再进行注册 return this } // additional parameters const args = toArray(arguments, 1) args.unshift(this) if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this }}


vue官网是这样说的


安装方法应该是解决防止插件多重注册的问题。如果用Vue.prototype.xxx挂载,每次使用都要重新挂载。

个人请指正,说明一下install的优点。

以上个人经验,希望能给你一个参考,也希望你能支持一下搜源网。


0

精彩评论

暂无评论...
验证码 换一张
取 消