浅谈Vue.use到底是什么鬼
我们在使用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其实并不神秘,内部还是我们平时使用的这些东西,仅仅只是给他们套上了一层高端的外衣而已。我们在开发中,也可以尝试使用这种方式,不仅简单,而且有逼格
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持
相关文章
- 这篇文章主要给大家介绍了关于vue中jsonp插件的使用方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-10
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03- 一个简单的jQuery分页插件,兼容AMD规范和requireJS./** * jQuery分页插件 * */;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } els...2015-11-08
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-20- 在页面开发中,经常遇到需要用户输入日期的操作。通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型。这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验。如果使...2015-10-30
jquery pagination分页插件使用详解(后台struts2)
这篇文章主要为大家详细介绍了jquery pagination 分页插件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 ...2017-01-26- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能效果图:先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下:复制代码 代码如下: <!DOCTYPE ht...2015-03-15
- 这篇文章主要介绍了vue中使用swiper 插件出错问题及解决办法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-22
- 这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09
- Query架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27
- 这篇文章主要为大家详细介绍了jquery插表单件form使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05
解决jquery插件:TypeError:$.browser is undefined报错的方法
首先先说一说$.browser browser就是用来获取浏览器基本信息的。 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需...2015-11-24- ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件,它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候,它会悄悄隐藏一个小小的 Flash 影片(swf),不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。...2016-03-30
IntelliJ IDEA 刷题利器 LeetCode 插件详解
这篇文章主要介绍了IntelliJ IDEA 刷题利器 LeetCode 插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-21JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06- 这篇文章主要介绍了jquery插件autocomplete用法,结合实例形式分析了jQuery插件autocomplete与后台交互实现搜索的自动完成功能实现技巧,需要的朋友可以参考下...2016-07-06
基于bootstrap插件实现autocomplete自动完成表单
这篇文章主要介绍了基于bootstrap插件实现autocomplete自动完成表单的相关资料,感兴趣的朋友可以参考一下...2016-05-09- WordPress插件的加载顺序其实对于很多朋友来讲都没有必要如何来操作了,但有时安装插件太多了我们需要设置一顺序了那么要如何来安装呢,下面来看看. 默认的情况下,Word...2016-11-25