千家信息网

Vue.use()和install怎么用

发表于:2025-01-18 作者:千家信息网编辑
千家信息网最后更新 2025年01月18日,这篇文章将为大家详细讲解有关Vue.use()和install怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue.use()和install用法介绍在vue
千家信息网最后更新 2025年01月18日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 方法。如果插件是一个函数,它会被作为 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 {  start = start || 0  let i = list.length - start  const ret: Array = 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官网是这样说的

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

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

0