浅谈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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 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/10/09 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
php封装一个异常的处理类
2017/06/08 PHP
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
基于python3实现倒叙字符串
2020/02/18 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
2014年副班长工作总结
2014/12/10 职场文书
团拜会主持词
2015/07/04 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL