文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue.use()和install怎么用

2023-06-29 17:58

关注

这篇文章将为大家详细讲解有关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源码文件路径:src/core/shared/util.jsexport 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源码文件路径: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) > -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.use()和install怎么用

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

关于“Vue.use()和install怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯