浅谈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 相关文章推荐
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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 编程请选择正确的文本编辑软件
2006/12/21 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
js类型检查实现代码
2010/10/29 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
vue跨域解决方法
2017/10/15 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Python中的pprint折腾记
2015/01/21 Python
Django CBV类的用法详解
2019/07/26 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
调研报告的主要写法
2019/04/18 职场文书
Golang 对es的操作实例
2022/04/20 Golang