浅谈Vue.use到底是什么鬼


Posted in Javascript onJanuary 21, 2020

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。

不过Vue.use到底是什么鬼?不妨来看个究竟。

其实这些轮子都可以称之为插件,它的功能范围没有严格的限制,一般包含如下几种:

  • 添加全局方法或者属性。如: vue-custom-element
  • 添加全局资源:指令/过滤器/过渡/组件等。如 vue-touch
  • 通过全局混入来添加一些组件选项。如 vue-router
  • 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  • 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

无论大小,插件要实现的功能无非就是上述这几种。但是,这并不妨碍我们创造出复杂的插件,不过我们还是希望给用户提供一个简单的使用方法,他不需要关注插件内部做了些什么。固Vue提供了use方法,专门来在new Vue()之前使用插件。

不管是官方提供的插件(例如vue-router、vuex),还是第三方的插件(例如ElementUI、ant)都是采用了此方式,不外乎插件内部的功能不同而已。当然,还有其他诸多此类插件,awesome-vue 就集合了大量由社区贡献的插件和库。

接下来,我们就来看下这个神秘的use方法是如何实现的。

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象,用于传入插件的配置:

MyPlugin.install = function (Vue, options) {
 // 1. 添加全局方法或属性
 Vue.myGlobalMethod = function () {
  // 逻辑...
 }
 // 2. 添加全局资源
 Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
   // 逻辑...
  }
  ...
 })
 // 3. 注入组件选项
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
  ...
 })
 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
  // 逻辑...
 }
 // 5. 注册全局组件
 Vue.component('myButton',{
  // ...组件选项
 })
}
Vue.use(MyPlugin,{
 // ...options
})

一个插件内部大概就是如上所示,其实也不外乎上述那几种东西,甚是简单??。接下来我们就来看下真实的案例ElementUI:

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
const install = function(Vue, opts = {}) {
 locale.use(opts.locale);
 locale.i18n(opts.i18n);
 // 注册全局组件
 components.forEach(component => {
  Vue.component(component.name, component);
 });
 Vue.use(InfiniteScroll);
 Vue.use(Loading.directive);
 // 添加实例方法
 Vue.prototype.$ELEMENT = {
  size: opts.size || '',
  zIndex: opts.zIndex || 2000
 };
 // 添加实例方法
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$msgbox = MessageBox;
 Vue.prototype.$alert = MessageBox.alert;
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$prompt = MessageBox.prompt;
 Vue.prototype.$notify = Notification;
 Vue.prototype.$message = Message;
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}
export default {
 version: '2.13.0',
 locale: locale.use,
 i18n: locale.i18n,
 install,
 CollapseTransition,
 Loading,
 Pagination,
 Dialog,
 Autocomplete,
 // ...other components
};

我们不难发现,其实自己来实现一个插件也是超级简单,只要对外暴露一个install方法即可,在使用Vue.use的时候,会调用这个方法。所以我们只要将要实现的内容放到install内部即可。这样的好处就是插件需要一开始调用的方法都封装在install里面,更加精简和可拓展性更高。

大家可能也有注意到,这里的install其实是将所有的组件全部引入了。作为一个庞大的插件库,这样可能会有一些性能问题。用过的ElementUI的同学都知道,它是支持按需引入的,其实在上面的示例中也可以发现一些蛛丝马迹。

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
// ....省去中间内容
export default {
 version: '2.13.0',
 locale: locale.use,
 i18n: locale.i18n,
 install,
 CollapseTransition,
 Loading,
 Pagination,
 Dialog,
 Autocomplete,
 // ...other components
};

这里将每个组件都单独都导出了,而在每个组件内部,也类似的暴露了install来组件每个组件,这样就可以单独Vue.use每个组件,从而实现按需引入的目的。

import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
 Vue.component(Alert.name, Alert);
};
export default Alert;

除了上述内容之外,还有几点值得我们注意一下:

插件传入的如果是一个对象,则执行其install方法,如果是一个函数,则执行它自身,并bind this为null,然后传入额外的参数

if (typeof plugin.install === 'function') {
 plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
 plugin.apply(null, args);
}

如果插件没有被注册过,那么注册成功之后会给插件添加一个installed的属性,其值为true。Vue.use方法内部会检测插件的installed属性,从而避免重复注册插件

Vue.use其实并不神秘,内部还是我们平时使用的这些东西,仅仅只是给他们套上了一层高端的外衣而已。我们在开发中,也可以尝试使用这种方式,不仅简单,而且有逼格

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
jquery uaMatch源代码
Feb 14 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
JS实现瀑布流效果
Mar 07 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 #Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 #Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 #Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 #Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 #Javascript
Angular单元测试之事件触发的实现
Jan 20 #Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 #Javascript
You might like
PHP四大安全策略
2014/03/12 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
php检测url是否存在的方法
2015/04/14 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
详解React 元素渲染
2020/07/07 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python定时任务 sched模块用法实例
2019/11/04 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
爱情保证书大全
2014/04/29 职场文书
车辆委托书范本
2014/10/05 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2014年卫生工作总结
2014/11/27 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript