Vue.use()的用法和install的用法解析
目录
- Vue.use()和install用法
- 介绍
- 为什么这样做?
- Vue.use为什么要使用install
- 疑问
- 从源码分析
- vue官网是这样说的
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 || 0let i = list.length - startconst 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 parametersconst 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.use()的用法和install的用法解析】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- 基于Python实现简易的自制头像神器
- Spring配置数据源的三种方式(小结)
- docker|docker 内存监控与压测方式
- {调取该文章的TAG关键词}|第二届郎酒庄园三品节颁奖典礼圆满举行!576个获奖团体/个人揭幕
- Android中点击按钮获取星级评分条的评分
- uniapp中小程序的授权操作
- Flutter mac上打包安卓APK遇到的坑
- 8.Android-简单的登录案例编写
- 逆向工程软件专用API的教程(破解你的Couch)
- Buggy CakePHP代码(CakePHP开发人员最常犯的6个错误)