Vue.use()的用法和install的用法解析
更新时间：2022年03月29日 09:40:21 作者：清风细雨_林木木
这篇文章主要介绍了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.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源码文件路径：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的优势
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了为什么vue中不建议使用空字符串作为className，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
elementui 开始结束时间可以选择同一天不同时间段的实现代码
这篇文章主要介绍了elementui 开始结束时间可以选择同一天不同时间段的实现代码,需要先在main.js中导入相应代码,代码简单易懂,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue3数据可视化实现数字滚动特效,实现思路是使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，详细代码跟随小编一起看看吧2022-09-09
前端vue面试总问watch和computed区别及建议总结
在现代前端的面试中,vue和react是面试过程中基本必问的技术栈,其中Vue响应式话题,watch和computed是面试官非常喜欢聊的主题,虽然watch和computed它们都用于监听数据的变化,但它们在实现原理、使用场景和行为上有着显著的区别,本文将深入探讨,并提供一些面试过程中的建议2023-10-10
这篇文章主要介绍了使用vue.js实现checkbox的全选和多个的删除功能,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了vue实现商品列表的无限加载思路和步骤详解,基础思路是触底条件满足之后 page++,拉取下一页数据,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下,2024-06-06
最近接触学习Vue.js框架结合Element-ui组件开发项目。由于最近需要实现国际化功能，所以下面这篇文章主要介绍了vue项目国际化vue-i18n的使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2018-03-03
这篇文章主要介绍了vue+elementUI中el-radio设置默认值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了应用provide与inject刷新Vue页面的两种方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，多多进步，祝大家早日升职加薪2021-09-09
这篇文章主要介绍了vue的路由动画切换页面无法读取meta值的bug记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论