浅谈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编程起步(第五课)
Feb 27 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
jquery $("#variable") 循环改变variable的值示例
Feb 23 Javascript
深入学习JavaScript对象
Oct 13 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
vue常用高阶函数及综合实例
Feb 25 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循环跳出的问题
2013/07/01 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
javascript实现计算器功能
2020/03/30 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python发送告警邮件脚本
2018/09/17 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python next()和iter()函数原理解析
2020/02/07 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
数控专业应届生求职信
2013/11/27 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
丧事主持词大全
2014/04/02 职场文书
委托书如何写
2014/08/30 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
python缺失值的解决方法总结
2021/06/09 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
Elasticsearch 数据类型及管理
2022/04/19 Python