浅谈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面向对象编程
Mar 04 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
详解参数传递四种形式
Jul 21 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
react-router中的属性详解
Jun 01 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 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
dedecms系统常用术语汇总
2007/04/03 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
php实现图片压缩处理
2020/09/09 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
岗位职责的构建方法
2014/02/01 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
二年级数学教学反思
2016/02/16 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server