我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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 方法。如果插件是一个函数,它会被作为 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源码文件路径:class="lazy" data-src/core/shared/util.js
export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}
// Vue源码文件路径:class="lazy" data-src/core/global-api/use.js
import { 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) > -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官网是这样说的

在这里插入图片描述

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

个人理解,还请大佬指正解释一下install的优势

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

numpy中np.c_和np.r_的用法解析

本文主要介绍了numpy中np.c_和np.r_的用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-03-13

vue3中ref和reactive的用法和解析(推荐)

这篇文章主要介绍了vue3的ref和reactive的用法和解析,开始部分讲解了ref,reactive的使用实例,如何进行类型的标注,配合ts这么使用,接着讲解了两者的区别,分别需要注意的点,还有ref的顶层自动解包,需要的朋友可以参考下
2023-03-19

pip中install报错的解决方法

小编给大家分享一下pip中install报错的解决方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!解决方法:1、ReadTimeoutError,在pip安装所
2023-06-20

VUE中的exportdefault和export使用方法解析

exportdefault和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。但是,在一个文件或模块中export,import可以有多个,exportdefault却只能有一个。
2022-12-14

解析Golang中断言的作用和使用方法

Golang断言的作用及使用方法解析在Golang中,断言(assertion)是一种将接口值转换为具体类型的操作。断言通常用于在运行时确定接口值是否实现了特定的接口或具体类型,并根据判断结果来执行相应的逻辑处理。断言的主要作用是在类型
解析Golang中断言的作用和使用方法
2024-01-29

解析android中ProgressBar的用法

范例说明Android的Widget,有许多是为了与User交互而特别设计的,但也有部分是作为程序提示、显示程序运行状态的Widget。现在介绍的范例,与前一章介绍过的ProgressDialog对话框的应用目的相似,但由于前章介绍的Pro
2022-06-06

c_str()的用法详细解析

c_str()就是把string类对象转换成和c兼容的char *类型。这是为了与c语言兼容,在c语言中没有string类型,故必须通过string类对象的成员函数c_str()把string 对象转换成c中的字符串样式
2022-11-15

CStdioFile的用法详细解析

CStdioFile 不支持Duplicate,LockRange,和UnlockRange 这几个CFile 函数。如果在CStdioFile 中调用了这几个函数,将会出现CNoSupported 异常
2022-11-15

解析PHP中的Request用法

PHP中的Request用法解析在PHP编程中,Request是一个非常重要的概念,用于处理来自客户端的请求数据。在本文中,我们将深入探讨PHP中Request的用法,并提供一些具体的代码示例来帮助你更好地理解。让我们一起来详细解析吧。
解析PHP中的Request用法
2024-02-27

编程热搜

目录